/* ============================================================
   TechLab site navigation — one row, two groups.

   Left, after the logo: this page's own sections (.nav-page), muted,
   with the scrollspy highlight. Right: the site menus — Comparison
   pages, Top brands, Guide me. The old second row is gone, so its
   height is zero everywhere a page still adds it in.

   Loaded after each page's inline <style>, so these rules win on
   equal specificity where they intentionally restate an older one.
   ============================================================ */

:root{
  --nav-l1-h: 56px;
  --nav-l2-h: 0px;
}

/* The whole stack sticks as one unit. */
.navbar{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line, rgba(20,23,26,.1));
}

/* ── Level 1 ───────────────────────────────────────────────── */
.nav-l1{ position:relative; border-bottom:1px solid var(--line, rgba(20,23,26,.1)); }
.navbar .nav-l1 .wrap{
  display:flex; align-items:center; gap:14px;
  height:var(--nav-l1-h); max-width:1660px;
}
.nav-l1 .logo{
  font-family:var(--font-display, sans-serif); font-weight:700;
  font-size:var(--t-base, 16px); white-space:nowrap; margin-right:4px;
  /* flex, not block: as a block the link sat on a text baseline with
     descender room under it, which lifted the name ~4px above the
     section links and menus beside it */
  display:flex; align-items:center;
}
.nav-l1 .logo a{
  text-decoration:none; color:var(--ink, #14171A); border-bottom:none;
  display:inline-flex; align-items:center; gap:14px;
}
/* The T is a hole in the tile rather than a white shape on it, so the
   mark works on any surface the nav ever sits on — the tile itself is
   currentColor and inherits the link's ink. Only the L is fixed. */
/* The TLR crown mark: drawn in its own colours on a transparent ground,
   so it sits on any surface. Its weight is low — heavy letters under a
   light, pointed crown — so centring its box makes it look dropped.
   Lifted by its centre of mass (~6px at this size); the name stays on
   the row's line with the other nav items. */
.nav-l1 .logo .tl-mark{
  width:auto; height:32px; flex:none; display:block; transform:translateY(-6px);
}
.nav-l1 .logo .tl-word{ letter-spacing:-.01em; }
.nav-l1 .logo .tl-tech{ color:#1F3D8B; }
.nav-l1 .logo .tl-review{ color:#4A515C; }
@media (max-width:560px){
  .nav-l1 .logo .tl-mark{ height:28px; transform:translateY(-5.5px); }
  .nav-l1 .logo a{ gap:10px; }
}

/* Link cluster sits to the right on desktop. */
.nav-l1-links{ display:flex; align-items:center; gap:10px; margin-left:auto; }
/* Each page's own stylesheet still carries `.navdrop{ order:98 }` from
   the single-level nav, which would float both dropdowns past the
   Guide me button. Order here is just DOM order. */
.nav-l1-links > *{ order:0; }

/* ── Level 2 ───────────────────────────────────────────────── */
/* position:relative so the collapsed .jumps panel anchors under
   level 2 rather than under the whole two-level stack. */
.nav-l2{ position:relative; background:rgba(255,255,255,.72); }
.navbar .nav-l2 .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; height:var(--nav-l2-h); max-width:1660px;
}
/* Pages with no page-level wayfinding (e.g. disclosure) collapse it. */
.nav-l2.is-empty{ display:none; }

/* ── This page's sections, in the top row ─────────────────── */
/* A short rule after the logo starts the group; the links are a size
   down from the menus and in the soft ink, so they read as wayfinding
   for this page rather than as more places to go. */
.nav-page{ display:flex; align-items:center; min-width:0; margin-left:4px; }
.nav-page::before{
  content:''; flex:none; width:1px; height:22px; margin-right:18px;
  background:var(--line-strong, rgba(20,23,26,.18));
}
.nav-page .jumps{ font-size:13px; gap:18px; }
.nav-page .jumps a, .nav-page .jumps button{ color:var(--ink-soft, #5A626B); font-weight:500; }
.nav-page .jumps a:hover, .nav-page .jumps button:hover{ color:var(--ink, #14171A); }
.nav-page .jumps a.is-cta{ color:var(--kit-deep, #0B63A8); font-weight:600; }
/* One highlight, and it follows the scroll: on tab pages the selected
   tab is no longer marked by itself, site-nav.js moves .is-active. */
.navbar .jumps button[aria-selected="true"]{
  color:var(--ink-soft, #5A626B); font-weight:500; border-bottom-color:transparent;
  background:none; box-shadow:none;
}
.navbar .jumps a.is-active, .navbar .jumps button.is-active{
  color:var(--ink, #14171A); font-weight:600; border-bottom-color:var(--ink, #14171A);
}
/* Collapsed into the "On this page" menu: a tinted row with a rail,
   since an underline would collide with the row separators. */
.navbar .jumps.is-open a.is-active, .navbar .jumps.is-open button.is-active{
  border-bottom-color:var(--line, rgba(20,23,26,.1)); background:var(--bg-alt, #F7F8F9);
  box-shadow:inset 3px 0 0 0 var(--ink, #14171A);
}
/* When the section links collapse behind the toggle (each page's own
   breakpoint), label it rather than leave a bare burger in the row. */
.navbar .nav-page .nav-toggle{ width:auto; padding:0 12px; gap:8px; }
.navbar .nav-page .nav-toggle::before{
  content:"On this page";
  font-family:var(--font-body, Inter, system-ui, sans-serif);
  font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--ink, #14171A); white-space:nowrap;
}
@media (max-width:560px){
  .nav-page::before{ display:none; }
}
/* Above phone width, site-nav.js folds the links into the "On this page"
   menu whenever they would not fit beside the site menus (a page's own
   CSS still does it below 900px). Same look as that page-level menu. */
.navbar.is-compact .nav-page .jumps{
  display:none; position:absolute; top:100%; left:0; right:0; z-index:60;
  flex-direction:column; gap:0; background:#fff;
  border-bottom:1px solid var(--line, rgba(20,23,26,.1));
  box-shadow:0 16px 28px -18px rgba(11,23,39,.28);
}
.navbar.is-compact .nav-page .jumps.is-open{ display:flex; }
.navbar.is-compact .nav-page .jumps a, .navbar.is-compact .nav-page .jumps button{
  width:100%; text-align:left; padding:14px 32px; border-bottom:1px solid var(--line, rgba(20,23,26,.1));
}
.navbar.is-compact .nav-page .jumps > :last-child{ border-bottom:none; }
.navbar.is-compact .nav-page .nav-toggle{
  display:inline-flex; align-items:center; justify-content:center; height:36px; flex:none;
  border-radius:8px; border:1px solid var(--line, rgba(20,23,26,.12)); background:#fff; cursor:pointer;
}
.navbar.is-compact .nav-toggle span, .navbar.is-compact .nav-toggle span::before, .navbar.is-compact .nav-toggle span::after{
  display:block; width:16px; height:2px; background:var(--ink, #14171A); border-radius:2px;
  transition:transform .18s ease, opacity .18s ease;
}
.navbar.is-compact .nav-toggle span{ position:relative; }
.navbar.is-compact .nav-toggle span::before, .navbar.is-compact .nav-toggle span::after{ content:''; position:absolute; left:0; }
.navbar.is-compact .nav-toggle span::before{ top:-5px; }
.navbar.is-compact .nav-toggle span::after{ top:5px; }
.navbar.is-compact .nav-toggle[aria-expanded="true"] span{ background:transparent; }
.navbar.is-compact .nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.navbar.is-compact .nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* ── Dropdowns ─────────────────────────────────────────────── */
.navdrop{ position:relative; flex:none; }
.navdrop-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink, #14171A);
  background:#fff; border:1px solid var(--line, rgba(20,23,26,.12));
  border-radius:100px; padding:7px 14px; line-height:1.2; white-space:nowrap;
}
.navdrop-btn:hover{ background:var(--bg-alt, #F7F8F9); }
.navdrop-btn:focus-visible{ outline:2px solid var(--ink, #14171A); outline-offset:2px; }
.navdrop-caret{ font-size:10px; color:var(--ink-soft, #5A626B); transition:transform .18s ease; }
.navdrop.is-open .navdrop-caret{ transform:rotate(180deg); }

/* A dropdown button whose menu holds the current page. */
.navdrop-btn.is-here{
  border-color:var(--ink, #14171A);
  box-shadow:inset 0 -2px 0 0 var(--ink, #14171A);
}

/* Rows run edge to edge with square corners, so the menu itself owns
   the only rounding — hence padding:0 + overflow:hidden. */
.navdrop-menu{
  display:none; position:absolute; top:calc(100% + 9px); right:0; z-index:60;
  width:max-content; min-width:340px; max-width:min(400px, calc(100vw - 32px));
  background:#fff; border:1px solid var(--line, rgba(20,23,26,.12));
  border-radius:12px; box-shadow:0 24px 48px -22px rgba(11,23,39,.36);
  padding:0; overflow:hidden;
  max-height:min(72vh, 560px); overflow-y:auto;
}
.navdrop.is-open .navdrop-menu{ display:block; }
.navdrop-group{
  font-family:var(--font-mono, ui-monospace, monospace); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft, #5A626B);
  padding:9px 16px 5px; background:var(--bg-alt, #F7F8F9);
  border-bottom:1px solid var(--line, rgba(20,23,26,.08));
}
.navdrop-menu a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; border-radius:0; text-decoration:none; border-bottom:none;
  font-size:13.5px; line-height:1.3; color:var(--ink, #14171A); white-space:nowrap;
}
.navdrop-menu a + a{ border-top:1px solid var(--line, rgba(20,23,26,.07)); }
.navdrop-menu a:hover{ background:var(--bg-alt, #F7F8F9); border-bottom:none; }
.navdrop-menu a:focus-visible{ outline:2px solid var(--ink, #14171A); outline-offset:-2px; }

/* Footer row — secondary links sit apart from the primary list. */
.navdrop-foot{
  border-top:1px solid var(--line, rgba(20,23,26,.12));
  background:var(--bg-alt, #F7F8F9);
}
.navdrop-foot a{ font-size:12.5px; color:var(--ink-soft, #5A626B); }
.navdrop-foot a:hover{ color:var(--ink, #14171A); background:#fff; }

/* Current page inside a menu — tinted row, accent rail, explicit label.
   Three cues rather than one so it survives colour-blindness and the
   low-contrast rendering some mobile browsers apply to menus. */
.navdrop-menu a[aria-current="page"]{
  background:var(--bg-alt, #F7F8F9); font-weight:700;
  box-shadow:inset 3px 0 0 0 var(--ink, #14171A);
}
/* Inline, not stacked — a second line here was the main thing making
   these menus tall. */
.navdrop-menu a[aria-current="page"] .nd-label::after{
  content:"You're here"; display:inline-block; margin-left:8px;
  font-family:var(--font-mono, ui-monospace, monospace); font-size:9px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft, #5A626B);
  font-weight:500; vertical-align:middle;
}

.nd-label{ display:block; min-width:0; }

/* Count badge — "5 brands" beside each comparison page. */
.nd-badge{
  flex:none; font-family:var(--font-mono, ui-monospace, monospace);
  font-size:10px; letter-spacing:.05em; font-weight:600;
  padding:3px 8px; border-radius:100px; white-space:nowrap;
  background:var(--ink, #14171A); color:#fff;
}
/* An icon in the badge's place — the envelope on "Mailchimp alternatives". */
.nd-icon{ flex:none; display:inline-flex; color:var(--ink, #14171A); }
.nd-icon svg{
  width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
/* Category tag — which comparison a brand belongs to. */
.nd-tag{
  flex:none; font-family:var(--font-mono, ui-monospace, monospace);
  font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  padding:3px 8px; border-radius:100px; white-space:nowrap; border:1px solid transparent;
}
.nd-tag--email{ background:#E8F5FF; color:#0B63A8; border-color:rgba(11,99,168,.22); }
.nd-tag--auto{ background:#F0EDFE; color:#4C2FBF; border-color:rgba(76,47,191,.22); }

/* ── Guide me ──────────────────────────────────────────────── */
.nav-guide{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:700; color:#fff;
  background:var(--ink, #14171A); border:1px solid var(--ink, #14171A);
  border-radius:100px; padding:8px 16px; line-height:1.2; white-space:nowrap;
}
.nav-guide:hover{ background:#000; }
.nav-guide:focus-visible{ outline:2px solid var(--ink, #14171A); outline-offset:2px; }
.nav-guide-spark{ font-size:12px; }

/* ── Level-1 mobile ────────────────────────────────────────── */
.nav-l1-toggle{ display:none; }

@media (max-width:900px){
  .nav-l1-links{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:70;
    flex-direction:column; align-items:stretch; gap:0; margin-left:0;
    background:#fff; border-bottom:1px solid var(--line, rgba(20,23,26,.1));
    box-shadow:0 16px 28px -18px rgba(11,23,39,.28);
    padding:8px; max-height:calc(100vh - var(--nav-l1-h)); overflow-y:auto;
  }
  .nav-l1-links.is-open{ display:flex; }

  /* Dropdowns become inline accordions — an absolutely positioned menu
     inside an already-absolute panel is unusable on a phone. */
  .nav-l1-links .navdrop{ width:100%; }
  .nav-l1-links .navdrop-btn{
    width:100%; justify-content:space-between; border-radius:10px;
    padding:13px 14px; font-size:15px;
  }
  .nav-l1-links .navdrop-menu{
    position:static; display:none; min-width:0; max-width:none; width:100%;
    box-shadow:none; border:none; border-radius:0; padding:2px 0 8px;
    max-height:none; overflow:visible;
  }
  .nav-l1-links .navdrop.is-open .navdrop-menu{ display:block; }
  .nav-l1-links .navdrop-menu a{ padding:12px 14px; font-size:14.5px; }
  .nav-guide{ width:100%; justify-content:center; padding:13px 16px; font-size:15px; margin-top:4px; }

  .nav-l1-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:8px;
    border:1px solid var(--line, rgba(20,23,26,.12));
    background:#fff; cursor:pointer; padding:0; flex:none; margin-left:auto;
  }
  .nav-l1-toggle span, .nav-l1-toggle span::before, .nav-l1-toggle span::after{
    display:block; width:16px; height:2px; background:var(--ink, #14171A); border-radius:2px;
    transition:transform .18s ease, opacity .18s ease;
  }
  .nav-l1-toggle span{ position:relative; }
  .nav-l1-toggle span::before, .nav-l1-toggle span::after{ content:''; position:absolute; left:0; }
  .nav-l1-toggle span::before{ top:-5px; }
  .nav-l1-toggle span::after{ top:5px; }
  .nav-l1-toggle[aria-expanded="true"] span{ background:transparent; }
  .nav-l1-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
  .nav-l1-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }
}

/* ============================================================
   GUIDE ME MODAL
   ============================================================ */
.gm-overlay{
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(8,12,20,.58); backdrop-filter:blur(3px);
  padding:24px 16px; overflow-y:auto;
}
.gm-overlay.is-open{ display:block; }
body.gm-locked{ overflow:hidden; }

.gm-dialog{
  position:relative; margin:0 auto; max-width:600px; width:100%;
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(8,12,20,.6);
  font-family:var(--font-body, Inter, system-ui, sans-serif);
  color:var(--ink, #14171A);
}
@media (min-height:640px){ .gm-dialog{ margin-top:4vh; margin-bottom:4vh; } }

.gm-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:20px 22px 0;
}
.gm-kicker{
  font-family:var(--font-mono, ui-monospace, monospace); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft, #5A626B);
}
.gm-title{
  font-family:var(--font-display, sans-serif); font-weight:700;
  font-size:19px; line-height:1.25; margin:4px 0 0;
}
.gm-close{
  flex:none; width:34px; height:34px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line, rgba(20,23,26,.12)); background:#fff;
  font-size:19px; line-height:1; color:var(--ink-soft, #5A626B);
}
.gm-close:hover{ background:var(--bg-alt, #F7F8F9); color:var(--ink, #14171A); }
.gm-close:focus-visible{ outline:2px solid var(--ink, #14171A); outline-offset:2px; }

.gm-body{ padding:18px 22px 22px; }

.gm-bar{
  height:5px; border-radius:100px; background:var(--bg-alt, #F7F8F9);
  overflow:hidden; margin:14px 0 9px;
}
.gm-bar span{
  display:block; height:100%; width:0; border-radius:100px;
  background:linear-gradient(90deg,#2E9BF0,#7A5AF8); transition:width .3s ease;
}
.gm-count{
  font-family:var(--font-mono, ui-monospace, monospace); font-size:10.5px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft, #5A626B);
}

.gm-q{
  font-family:var(--font-display, sans-serif); font-weight:700;
  font-size:18px; line-height:1.3; margin:16px 0 6px;
}
.gm-hint{ font-size:13px; line-height:1.5; color:var(--ink-soft, #5A626B); margin:0 0 16px; }

.gm-opts{ display:flex; flex-direction:column; gap:10px; }
.gm-opt{
  position:relative; text-align:left; cursor:pointer; width:100%;
  font-family:inherit; font-size:14.5px; line-height:1.4; color:var(--ink, #14171A);
  background:#fff; border:1.5px solid var(--line, rgba(20,23,26,.12));
  border-radius:12px; padding:14px 40px 14px 16px;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.gm-opt:hover{ border-color:var(--ink, #14171A); background:var(--bg-alt, #F7F8F9); transform:translateX(3px); }
.gm-opt:focus-visible{ outline:2px solid var(--ink, #14171A); outline-offset:2px; }
.gm-opt::after{
  content:'→'; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:var(--ink-soft, #5A626B);
}
.gm-opt:hover::after{ color:var(--ink, #14171A); }

.gm-back{
  margin-top:16px; background:none; border:none; cursor:pointer; padding:6px 0;
  font-family:inherit; font-size:13px; color:var(--ink-soft, #5A626B); text-decoration:underline;
}
.gm-back:hover{ color:var(--ink, #14171A); }

/* ── Result ────────────────────────────────────────────────── */
.gm-result-head{
  padding:22px; text-align:center;
  background:var(--gm-soft, #F7F8F9); border-bottom:1px solid var(--line, rgba(20,23,26,.1));
}
.gm-result-brand{
  font-family:var(--font-display, sans-serif); font-weight:700; font-size:26px;
  line-height:1.15; color:var(--gm-deep, #14171A); margin:6px 0 4px;
}
.gm-result-for{ font-size:13.5px; color:var(--ink-soft, #5A626B); }

.gm-why{ margin:0 0 16px; padding-left:20px; font-size:13.5px; line-height:1.6; }
.gm-why li{ margin-bottom:7px; }

.gm-runner{
  font-size:13px; line-height:1.55; color:var(--ink-soft, #5A626B);
  background:var(--bg-alt, #F7F8F9); border-radius:10px; padding:12px 14px; margin-bottom:18px;
}

.gm-actions{ display:flex; flex-direction:column; gap:9px; }
.gm-go{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  text-decoration:none; border-bottom:none; border-radius:12px; padding:14px 16px;
  font-size:14.5px; font-weight:600; line-height:1.35;
}
.gm-go-primary{ background:var(--gm-deep, #14171A); color:#fff; }
.gm-go-primary:hover{ filter:brightness(1.12); }
.gm-go-secondary{
  background:#fff; color:var(--ink, #14171A);
  border:1.5px solid var(--line, rgba(20,23,26,.12));
}
.gm-go-secondary:hover{ border-color:var(--ink, #14171A); background:var(--bg-alt, #F7F8F9); }
.gm-go small{ display:block; font-weight:400; font-size:12px; opacity:.78; margin-top:2px; }
.gm-go-arrow{ flex:none; font-size:16px; }

@media (max-width:600px){
  .gm-overlay{ padding:0; }
  .gm-dialog{ border-radius:0; min-height:100vh; margin:0; max-width:none; }
  .gm-head{ padding:16px 18px 0; }
  .gm-body{ padding:16px 18px 32px; }
  .gm-q{ font-size:17px; }
  .gm-opt{ font-size:15px; padding:15px 40px 15px 15px; }
}

@media (prefers-reduced-motion:reduce){
  .gm-opt:hover{ transform:none; }
  .gm-bar span{ transition:none; }
  .navdrop-caret{ transition:none; }
}