/* Nav v2 (Phase 2 "Updated Nav"). Spec: docs/superpowers/specs/2026-09-02-nav-v2-design.md
   Desktop drawer + mobile drill-down. Only nav-v2* selectors live here.
   Bar colours come from the --hv2-* variables set on header.header-v2 in header-v2.css. */

:root {
  --nav-v2-font: 'Aeonik', 'Lato', sans-serif;
  --nav-v2-navy: #1e3c74;
  --nav-v2-slate: #7c9ec5;
  --nav-v2-blue: #0088f7;
  /* Brand "Global outline": drawer separators and bottom line (Figma 9535:8637). */
  --nav-v2-outline: #dbebfd;
  /* Brand "Baby blue opaque 20%": Featured aside ground. */
  --nav-v2-tint: #f1f8ff;
  /* Content rail of the 1440 frame: 96px, drifting outward past 1440 as the
     header container (1440 max, 96px padding) stays capped. */
  --nav-v2-rail: max(96px, calc(50% - 624px));
  --nav-v2-bar-h: 76px;
  --nav-v2-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Desktop bar (≥1025px)
   ========================================================================== */
/* Bar items (Figma 9535:8515, 1440): left-aligned 96px after the logo, 48px
   apart, Aeonik Medium 16/24 with a 16px chevron 8px to the right; the
   Customer login / Contact sales pair sits alone at the right. The frame only
   fits from 1440 down, so every measure scales linearly between the frame's
   values at 1440 and 32 / 20 / 14px at 1025 (the pair is ~296px wide at
   1440 and ~250px at 1025 (header-v2.css); the container padding and the
   nav's right margin scale on the same line). Budget at 1025: 914px inner
   for 893px of content. The nav fills the bar so the pair stays at the
   right (their list has margin: 0 !important in header-v2.css). */
.nav-v2 {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: clamp(32px, calc(32px + (100vw - 1025px) * 0.154217), 96px);
  margin-right: clamp(16px, calc(16px + (100vw - 1025px) * 0.019277), 24px);
}
@media (min-width: 1025px) {
  .nav-v2 {
    display: block;
  }
}
.nav-v2__bar {
  display: flex;
  align-items: center;
  gap: clamp(20px, calc(20px + (100vw - 1025px) * 0.06747), 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-v2__item {
  margin: 0;
}
.nav-v2__trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--nav-v2-bar-h);
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  color: var(--hv2-text, var(--nav-v2-navy));
  font-family: var(--nav-v2-font);
  font-size: clamp(14px, calc(14px + (100vw - 1025px) / 207.5), 16px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s ease;
}
.nav-v2__trigger:hover,
.nav-v2__trigger.is-active,
.nav-v2__trigger:focus-visible {
  color: var(--hv2-link-hover, var(--nav-v2-blue));
}
.nav-v2__trigger:focus-visible {
  outline: 2px solid var(--nav-v2-blue);
  outline-offset: 4px;
}
/* 16px icon box holding the 12x8 glyph (frame: 16px "chevron down" icon). */
.nav-v2__chevron {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  padding: 4px 2px;
  transition: transform 0.25s ease;
}
/* Between 1025 and 1160 the row is tight: the icon box shrinks to the glyph
   (at 1100 the gap has grown but not the budget, so the switch waits). */
@media (max-width: 1160px) {
  .nav-v2__chevron {
    width: 12px;
    height: 12px;
    padding: 2px 0;
  }
}
.nav-v2__trigger.is-active .nav-v2__chevron {
  transform: rotate(180deg);
}
/* ==========================================================================
   Desktop drawer. Absolute under the fixed header, full viewport width.
   Height is driven in px by nav-v2.js (0 → panel height → 0).
   ========================================================================== */
.nav-v2__drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  background: #ffffff;
  border-bottom: 1px solid var(--nav-v2-outline);
  transition: height 0.3s var(--nav-v2-ease);
}
.nav-v2__drawer[hidden] {
  display: none;
}
/* On a white bar (dark variant, or the light bar once scrolled) the drawer
   hangs on a 1px outline: positioned at top: 100% it covers the bar's own
   bottom border, so without this the white panel and the tinted Featured
   aside read as one surface. The blue bar keeps the frame's edge-to-edge look. */
header.header-v2--dark .nav-v2__drawer,
header.header-v2--light.header-v2--scrolled .nav-v2__drawer {
  border-top: 1px solid var(--nav-v2-outline);
}
@media (max-width: 1024px) {
  .nav-v2__drawer {
    display: none !important;
  }
}
.nav-v2__panel[hidden] {
  display: none;
}
/* Panels cross-fade (spec "Motion"): the incoming one rises 8px into place
   over 200ms, the outgoing one fades out over 150ms as an absolute layer so
   the drawer's height tween only follows the incoming panel. */
.nav-v2__panel {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-v2__panel.is-active {
  opacity: 1;
  transform: none;
  position: relative;
  z-index: 1;
  /* Paints above the leaving layer during the cross-fade. */
}
.nav-v2__panel.is-leaving {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: none;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
/* Panel grid (Figma 9535:8637, 1440). Columns start on the content rail and
   size to their text; the Featured aside is fixed-width and bleeds to the
   right edge. Full width on purpose: the aside's tint must reach the
   viewport edge, so the grid itself carries no rail padding. One row, never
   wrapping: a wrapping row breaks on the children's natural widths, which
   dropped the aside under the columns on narrow desktops (1025-1180). */
.nav-v2__grid {
  display: flex;
  align-items: stretch;
  font-family: var(--nav-v2-font);
  color: var(--nav-v2-navy);
}
/* The rail padding sits on the columns, not the grid: the aside's
   --nav-v2-rail percentages must resolve against the full drawer width.
   Columns stay side by side and shrink (titles and sub-copy wrap) instead
   of stacking. */
.nav-v2__cols {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: var(--nav-v2-rail);
  display: flex;
  align-items: stretch;
}
/* Next to the Featured aside the columns keep 40px of air before the tint;
   free space covers it at 1440, on narrow desktops it is what stops the last
   column's text from touching the aside. */
.nav-v2__grid--featured .nav-v2__cols {
  padding-right: 40px;
}
/* 32px top (header sits 32px under the bar line), 32px bottom under the last link. */
.nav-v2__col {
  flex: 0 1 auto;
  min-width: 0;
  padding: 32px 0;
}
/* 1px separator with 64px of air on each side, spanning the panel height. */
.nav-v2__col + .nav-v2__col {
  margin-left: 64px;
  padding-left: 64px;
  border-left: 1px solid var(--nav-v2-outline);
}
.nav-v2__links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Title-header columns (Products 18:100043, Integrations 47:1924): the links
   sit 12px in from the column header. Eyebrow columns (Customers, Resources)
   stay flush. The split lists carry the same inset each. */
.nav-v2-colhead--title + .nav-v2__links,
.nav-v2-colhead--title + .nav-v2__split .nav-v2__links {
  padding-left: 12px;
}
/* Integrations CTA row (Figma 9535:8948): a full-width rule, 24px of air above
   and below, 14/20 medium navy with a 15x14 chevron 10px to the right. A
   block sibling of the grid inside the panel, so the rail percentage resolves
   against the drawer width at every viewport (inside .nav-v2__cols it would not). */
.nav-v2__cta-row {
  box-sizing: border-box;
  padding: 24px 0 24px var(--nav-v2-rail);
  border-top: 1px solid var(--nav-v2-outline);
}
/* The lists above the CTA rule close 24px under the last link, not 32. */
.nav-v2__panel--cta .nav-v2__col {
  padding-bottom: 24px;
}
.nav-v2__cta {
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 10px;
  /* The row is a sibling of the grid, so it does not inherit the grid's face. */
  font-family: var(--nav-v2-font);
  color: var(--nav-v2-navy);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-v2__cta:hover {
  color: var(--nav-v2-blue);
}
.nav-v2__cta-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 14px;
}
/* Split lists (column_split 2 or 3): side-by-side lists 128px apart when the
   split column opens the panel (Integrations 9535:8915, Customers 9535:9267)
   and 96px apart when it follows another column (Resources > Company,
   9535:9106). */
.nav-v2__split {
  display: flex;
  align-items: flex-start;
  gap: 128px;
}
.nav-v2__col + .nav-v2__col .nav-v2__split {
  gap: 96px;
}
/* Narrow desktop (1025-1280): same anatomy, tighter separators, titles may wrap. */
@media (max-width: 1280px) {
  .nav-v2__col + .nav-v2__col {
    margin-left: 40px;
    padding-left: 40px;
  }
  .nav-v2__split {
    gap: 64px;
  }
  .nav-v2__col + .nav-v2__col .nav-v2__split {
    gap: 48px;
  }
}
/* Featured aside: 32px inset + the content + the rail, tinted to the viewport
   edge and as tall as the panel. It is sized by its content: one 302px card
   gives the 430px of Figma 9535:8688, two cards the 756px of 9535:9283, the
   text list 430px again (9535:9124). 48px under the content on every frame;
   the two-card variant starts 32px from the top instead of 24. It may shrink
   (never grow) when the columns need the room on narrow desktops. */
.nav-v2__featured {
  flex: 0 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 24px var(--nav-v2-rail) 48px 32px;
  background: var(--nav-v2-tint);
}
/* Two-card variant (Customers) starts 32px from the top; the class comes
   from the drawer partial. */
.nav-v2__featured--cards {
  padding-top: 32px;
}
@media (max-width: 1280px) {
  .nav-v2__featured {
    padding: 24px var(--nav-v2-rail) 40px 24px;
  }
}

/* ==========================================================================
   Shared fragments (desktop + mobile)
   ========================================================================== */
/* Column header: Aeonik Bold 18/24 navy, 24px above the first link. */
.nav-v2-colhead {
  margin: 0 0 24px;
  font-family: var(--nav-v2-font);
}
.nav-v2-colhead--title {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: var(--nav-v2-navy);
}
/* Eyebrow header (Customers 9535:9266, Resources 9535:9088): 14/20 medium
   slate, 16px above the first link. */
.nav-v2-colhead--eyebrow {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nav-v2-slate);
}
.nav-v2-colhead__a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-v2-colhead__a:hover {
  color: var(--nav-v2-blue);
}
/* Link row: title 16/24 medium navy, optional sub-copy 14/20 regular slate 2px under it. */
.nav-v2-link {
  margin: 0;
  font-family: var(--nav-v2-font);
}
.nav-v2-link__a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--nav-v2-navy);
  text-decoration: none;
  white-space: nowrap;
}
.nav-v2-link__a:hover .nav-v2-link__title {
  color: var(--nav-v2-blue);
}
.nav-v2-link__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  transition: color 0.2s ease;
}
.nav-v2-link__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--nav-v2-slate);
}
/* Nested sub-links (Expense Management, Figma 18:100060): 12px further in
   than the list, 14/20 medium, on the list's own 16px rhythm. */
.nav-v2-link__subs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0 0 12px;
  padding: 0;
  list-style: none;
}
.nav-v2-link__subs li {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}
.nav-v2-link__sub {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--nav-v2-navy);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-v2-link__sub:hover {
  color: var(--nav-v2-blue);
}
@media (max-width: 1280px) {
  .nav-v2-link__a {
    white-space: normal;
  }
}
.nav-v2-featured {
  font-family: var(--nav-v2-font);
}
/* Eyebrow ("Featured" or the item's featured_label): 14/20 medium slate in a
   24px box, 16px above the content. */
.nav-v2-featured__eyebrow {
  margin: 0 0 16px;
  padding: 2px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nav-v2-slate);
}
.nav-v2-featured__item {
  display: flex;
  flex-direction: column;
  color: var(--nav-v2-navy);
  text-decoration: none;
}
.nav-v2-featured__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 302 / 180;
  object-fit: cover;
  margin-bottom: 16px;
  border-radius: 8px;
}
.nav-v2-featured__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  transition: color 0.2s ease;
}
.nav-v2-featured__item:hover .nav-v2-featured__title {
  color: var(--nav-v2-blue);
}
.nav-v2-featured__desc {
  font-size: 16px;
  line-height: 24px;
}
/* Card (one image item, Products 18:100099): 302 wide, title 16/24 medium
   over a 14/20 regular description, both navy. */
.nav-v2-featured--card {
  width: 302px;
  max-width: 100%;
}
.nav-v2-featured--card .nav-v2-featured__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--nav-v2-navy);
}
/* Cards (two or more image items, Customers 9535:9283): the eyebrow sits over
   the first card only, the cards line up on their images 24px apart, and they
   shrink together (images keep their ratio) when the aside has to give room. */
.nav-v2-featured__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}
.nav-v2-featured--cards .nav-v2-featured__item {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 302px;
}
/* List (no images, Resources 173:2297): text rows 32px apart, title medium
   navy over an optional 14/20 regular navy line. */
.nav-v2-featured--list {
  width: 302px;
  max-width: 100%;
}
.nav-v2-featured--list .nav-v2-featured__item + .nav-v2-featured__item {
  margin-top: 32px;
}
.nav-v2-featured--list .nav-v2-featured__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--nav-v2-navy);
}
@media (max-width: 1280px) {
  .nav-v2-featured--card,
  .nav-v2-featured--list {
    width: 260px;
    max-width: 100%;
  }
  .nav-v2-featured--cards .nav-v2-featured__item {
    flex-basis: 200px;
    max-width: 220px;
  }
  /* The desktop aside keeps the two cards side by side and lets them shrink:
     wrapping at 1025 stacked them at 220px and left the aside half empty.
     The mobile overlay (.nav-v2-mobile__featured) keeps its own wrapping. */
  .nav-v2-featured__row {
    gap: 16px;
  }
  .nav-v2__featured .nav-v2-featured__row {
    flex-wrap: nowrap;
  }
}

/* ==========================================================================
   Hamburger (ported from header-v2.css #mobile-toggler, new id/classes so
   neither the Customizer nor app.js reach it). Figma "Component 98".
   ========================================================================== */
.nav-v2__burger {
  display: none;
  appearance: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 0 0 auto;
  padding: 0;
  background: var(--hv2-burger-bg, #e8f2fe);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
@media (max-width: 1024px) {
  .nav-v2__burger {
    display: inline-flex;
  }
}
/* Hover / keyboard focus: the box darkens a step (light-blue on the white bar,
   a more opaque white on the blue bar); the lock rules turn the bar white
   while the overlay is open, so the box follows the white-bar tone then. */
.nav-v2__burger:hover,
.nav-v2__burger:focus-visible {
  background: var(--nav-v2-burger-hover, #d5e8fc);
}
.nav-v2__burger:focus-visible {
  outline: 2px solid var(--nav-v2-blue);
  outline-offset: 2px;
}
header.header-v2--light:not(.header-v2--scrolled) .nav-v2__burger {
  --nav-v2-burger-hover: rgba(255, 255, 255, 0.32);
}
html.nav-v2-lock header.header-v2--light .nav-v2__burger {
  --nav-v2-burger-hover: #d5e8fc;
}
.nav-v2__burger-box {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}
.nav-v2__burger-inner,
.nav-v2__burger-inner::before,
.nav-v2__burger-inner::after {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--hv2-hamburger, var(--nav-v2-navy));
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-v2__burger-inner {
  top: 0;
}
.nav-v2__burger-inner::before,
.nav-v2__burger-inner::after {
  content: '';
}
.nav-v2__burger-inner::before {
  top: 6px;
}
.nav-v2__burger-inner::after {
  top: 12px;
}
.nav-v2__burger.is-active .nav-v2__burger-inner {
  transform: translateY(6px) rotate(45deg);
}
.nav-v2__burger.is-active .nav-v2__burger-inner::before {
  opacity: 0;
}
.nav-v2__burger.is-active .nav-v2__burger-inner::after {
  transform: translateY(-12px) rotate(-90deg);
}

/* ==========================================================================
   Mobile / tablet overlay (≤1024px). Fixed under the 77px bar (76 + border).
   Tablet frames: Figma 9557:11777 (level 1), 9557:12075 / 25811 / 25988 /
   26258 (level 2). Mobile frames (375): 9535:9803 (level 1), 9557:12411 /
   9544:12357 / 9557:25439 / 9557:24698 (level 2).
   ========================================================================== */
html.nav-v2-lock,
html.nav-v2-lock body {
  overflow: hidden;
}
/* With classic scrollbars the reserved gutter (header-v2.css) stays as an
   empty 15px strip while the lock hides the bar, and the canvas paints it in
   the page colour. Paint the canvas white and let the overlay span the full
   viewport width, gutter included. */
html.nav-v2-lock {
  background-color: #ffffff;
}
/* While the overlay is open the bar is white with the colour logo on every
   page (the frames show the white bar); light pages otherwise keep their
   transparent bar. Same variable set as header-v2--dark; the logo rules
   outrank header-v2.css's (0,3,1) selectors. */
@media (max-width: 1024px) {
  html.nav-v2-lock header.header-v2--light {
    --hv2-bg: #ffffff;
    --hv2-text: #1e3c74;
    --hv2-border: rgba(192, 220, 251, 0.5);
    --hv2-hamburger: #1e3c74;
    --hv2-burger-bg: #e8f2fe;
    /* No fade while locked: the white bar and the colour logo appear together. */
    transition: none;
  }
  html.nav-v2-lock header.header-v2--light .header-v2__logo--white {
    display: none;
  }
  html.nav-v2-lock header.header-v2--light .header-v2__logo--color {
    display: block;
  }
}
.nav-v2-mobile {
  position: fixed;
  top: calc(var(--nav-v2-bar-h) + 1px);
  left: 0;
  /* nav-v2.js measures the reserved scrollbar gutter on lock; 100vw excludes it. */
  width: calc(100vw + var(--nav-v2-gutter, 0px));
  bottom: 0;
  z-index: 95;
  overflow: hidden;
  background: #ffffff;
  font-family: var(--nav-v2-font);
  color: var(--nav-v2-navy);
}
.nav-v2-mobile[hidden] {
  display: none;
}
@media (min-width: 1025px) {
  .nav-v2-mobile {
    display: none !important;
  }
}

/* Level 1 (Figma 9557:11989): full-width rows, the CTA pair pinned to the
   bottom of the overlay. */
.nav-v2-mobile__root {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
.nav-v2-mobile__list {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-v2-mobile__item {
  margin: 0;
  border-bottom: 1px solid var(--nav-v2-outline);
}
/* 72px row: 16 + the 40px chevron box + 16. Plain links keep the height. */
.nav-v2-mobile__row {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  min-height: 72px;
  padding: 16px 32px;
  margin: 0;
  background: none;
  border: 0;
  color: var(--nav-v2-navy);
  font-family: var(--nav-v2-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nav-v2-mobile__row:hover,
.nav-v2-mobile__row:focus-visible {
  color: var(--nav-v2-blue);
}
.nav-v2-mobile__chevron {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 13px 16px;
}
.nav-v2-mobile__cta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding: 32px;
  background: #ffffff;
}
/* Same pair as the desktop bar (header-v2.css, Figma 18-106187) in its
   white-bar treatment: tinted login, CTA-blue contact, no stroke. Rows stay
   48px tall and full width. */
.nav-v2-mobile__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  line-height: 16px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-v2-mobile__btn--login {
  background: #e8f2fe;
  color: var(--nav-v2-navy);
}
.nav-v2-mobile__btn--login:hover {
  background: #d6e8fc;
  color: var(--nav-v2-navy);
}
.nav-v2-mobile__btn--contact {
  background: var(--nav-v2-blue);
  color: #ffffff;
}
.nav-v2-mobile__btn--contact:hover {
  background: #006fd6;
  color: #ffffff;
}

/* Level 2 panel slides in over level 1. A column so the Featured block can
   pin to the bottom when the sections are short (Customers, Resources). */
.nav-v2-mobile__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  transform: translateX(100%);
  transition: transform 0.25s var(--nav-v2-ease);
}
.nav-v2-mobile__panel[hidden] {
  display: none;
}
.nav-v2-mobile__panel.is-open {
  transform: none;
}
/* Back bar (Figma 9557:25804): tinted strip, 16/24 regular, small chevron. */
.nav-v2-mobile__back {
  appearance: none;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: 16px 32px;
  margin: 0;
  background: var(--nav-v2-tint);
  border: 0;
  color: var(--nav-v2-navy);
  font-family: var(--nav-v2-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  cursor: pointer;
}
.nav-v2-mobile__back:hover,
.nav-v2-mobile__back:focus-visible {
  color: var(--nav-v2-blue);
}
/* Keyboard focus: same ring as the desktop trigger, inset so it stays inside the overlay. */
.nav-v2-mobile__row:focus-visible,
.nav-v2-mobile__back:focus-visible,
.nav-v2-mobile__btn:focus-visible,
.nav-v2-mobile__cta-link:focus-visible {
  outline: 2px solid var(--nav-v2-blue);
  outline-offset: -4px;
}
.nav-v2-mobile__back-icon {
  flex: 0 0 auto;
  width: 6px;
  height: 10px;
}
/* Sections (Figma 9557:12304): 24px under the Back bar, rules inset 32px
   from the edges, 24px between sections, 32px under the last one. */
.nav-v2-mobile__section {
  flex: 0 0 auto;
  margin: 24px 32px 0;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--nav-v2-outline);
}
.nav-v2-mobile__section:last-of-type {
  padding-bottom: 32px;
  border-bottom: 0;
}
.nav-v2-mobile__section .nav-v2-colhead {
  margin-bottom: 16px;
}
/* Same 16px rhythm as the desktop .nav-v2__links: the shared .nav-v2-link rows carry no margin of their own. */
.nav-v2-mobile__links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Same 12px inset under a title header (mobile Products 18:101160, Integrations 18:101232). */
.nav-v2-colhead--title + .nav-v2-mobile__links {
  padding-left: 12px;
}
/* Integrations "See all integrations" (Figma 9544:12357): a plain inset row
   under the last section, 14/20 medium navy with the 15x14 chevron 4px to
   the right, 24px above (the section closes 32px under its links, so the
   row pulls up 8px) and 32px below. Same on tablet, whose frame omits it. */
.nav-v2-mobile__cta-link {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin: 0 32px;
  padding: 0 0 32px;
  color: var(--nav-v2-navy);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}
/* Measured after a section (its 32px bottom padding minus 8 = the frame's 24);
   a Featured block before the link keeps its own padding. */
.nav-v2-mobile__section + .nav-v2-mobile__cta-link {
  margin-top: -8px;
}
.nav-v2-mobile__cta-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 14px;
}
.nav-v2-mobile__cta-link:hover {
  color: var(--nav-v2-blue);
}
/* Featured block (Figma 9557:12343 / 26051 / 26480): tinted, padding 32,
   under the sections and pinned to the bottom when they are short. */
.nav-v2-mobile__featured {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 32px;
  background: var(--nav-v2-tint);
}
.nav-v2-mobile__featured .nav-v2-featured--card,
.nav-v2-mobile__featured .nav-v2-featured--list {
  width: auto;
  max-width: none;
}
.nav-v2-mobile__featured .nav-v2-featured--card .nav-v2-featured__item {
  width: 340px;
  max-width: 100%;
}
.nav-v2-mobile__featured .nav-v2-featured__img {
  aspect-ratio: 340 / 198;
}
.nav-v2-mobile__featured .nav-v2-featured__row {
  gap: 24px;
}
/* Cards grow with the panel above 768 (340px is the floor, not a cap). */
.nav-v2-mobile__featured .nav-v2-featured--cards .nav-v2-featured__item {
  flex: 1 1 340px;
  min-width: 0;
  max-width: none;
}
/* Text list: two items per line (340 each at 768, growing with the panel above it), 24px apart, 16px between lines. */
.nav-v2-mobile__featured .nav-v2-featured--list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 24px;
  row-gap: 16px;
}
.nav-v2-mobile__featured .nav-v2-featured--list .nav-v2-featured__eyebrow {
  flex: 0 0 100%;
  margin-bottom: 0;
}
.nav-v2-mobile__featured .nav-v2-featured--list .nav-v2-featured__item {
  flex: 1 1 340px;
}
/* The desktop list stacks its rows with a margin; the tablet grid uses row-gap instead. */
.nav-v2-mobile__featured .nav-v2-featured--list .nav-v2-featured__item + .nav-v2-featured__item {
  margin-top: 0;
}
/* Mobile (≤767, Figma 9535:9803 and the 375 panels): rows padded 24 with a
   small chevron, the CTA pair at 32/24 with 8px between buttons, the Back
   bar padded 16, level-2 content still on 32px rails, stacked Featured cards
   and a single-column list 32px apart. */
@media (max-width: 767px) {
  .nav-v2-mobile__row {
    padding: 24px;
  }
  .nav-v2-mobile__chevron {
    width: 6px;
    height: 10px;
    padding: 0;
  }
  .nav-v2-mobile__cta {
    gap: 8px;
    padding: 32px 24px;
  }
  .nav-v2-mobile__back {
    padding: 16px;
  }
  .nav-v2-mobile__featured .nav-v2-featured__img {
    aspect-ratio: 311 / 180;
  }
  .nav-v2-mobile__featured .nav-v2-featured__row {
    row-gap: 32px;
  }
  .nav-v2-mobile__featured .nav-v2-featured--card .nav-v2-featured__item {
    width: auto;
    max-width: none;
  }
  .nav-v2-mobile__featured .nav-v2-featured--cards .nav-v2-featured__item,
  .nav-v2-mobile__featured .nav-v2-featured--list .nav-v2-featured__item {
    flex-basis: 100%;
    width: auto;
    max-width: none;
  }
  /* 16px under the eyebrow (the row gap), 32px between the items (gap + margin). */
  .nav-v2-mobile__featured .nav-v2-featured--list .nav-v2-featured__item + .nav-v2-featured__item {
    margin-top: 16px;
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .nav-v2__drawer,
  .nav-v2__panel,
  .nav-v2__chevron,
  .nav-v2__trigger,
  .nav-v2__burger,
  .nav-v2__burger-inner,
  .nav-v2__burger-inner::before,
  .nav-v2__burger-inner::after,
  .nav-v2-mobile__panel,
  .nav-v2-mobile__btn {
    transition: none !important;
  }
}