/* ============================================================
   TechLab site navigation — two levels.

   Level 1 (site-wide): logo, Comparison pages, Top brands, Guide me.
   Level 2 (page-level): brand filter + section wayfinding/scrollspy.

   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: 46px;
}

/* 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;
}
.nav-l1 .logo a{ text-decoration:none; color:var(--ink, #14171A); border-bottom:none; }

/* 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; }

/* When the section links collapse behind the toggle (each page's own
   breakpoint), a bare 36px burger floating on an empty bar reads as
   broken layout. Label it and dock it right, under the site menus. */
.nav-l2 .nav-toggle{ width:auto; padding:0 12px; margin-left:auto; gap:8px; }
.nav-l2 .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;
}

/* ── 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;
}
/* 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; }
}