/**
 * TODO (https://sofiinc.atlassian.net/browse/MGROWTH-5451): Utilize CSS tokens from
 * supernova->wordpress token exporter pipeline
 */

/*
 * Guarantee the same TT Norms font files are used on every template.
 * Template-specific bundles (builder.min.css, sofiv4-wrapper.css) either
 * omit weight 500 entirely or point weights to a different CDN path (/v3/).
 * nav.css is enqueued last (it declares SOFI_CSS as a dependency), so these
 * declarations override any earlier conflicting @font-face rules.
 */
@font-face {
  font-family: "TT Norms";
  src: url("https://d32ijn7u0aqfv4.cloudfront.net/assets/fonts/TTNorms.woff2") format("woff2"),
       url("https://d32ijn7u0aqfv4.cloudfront.net/assets/fonts/TTNorms.woff") format("woff"),
       url("https://d32ijn7u0aqfv4.cloudfront.net/assets/fonts/TTNorms.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Norms";
  src: url("https://d32ijn7u0aqfv4.cloudfront.net/fonts/TTNorms-medium.woff2") format("woff2"),
       url("https://d32ijn7u0aqfv4.cloudfront.net/fonts/TTNorms-medium.woff") format("woff"),
       url("https://d32ijn7u0aqfv4.cloudfront.net/fonts/TTNorms-medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Norms";
  src: url("https://d32ijn7u0aqfv4.cloudfront.net/assets/fonts/TTNorms-bold.woff2") format("woff2"),
       url("https://d32ijn7u0aqfv4.cloudfront.net/assets/fonts/TTNorms-bold.woff") format("woff"),
       url("https://d32ijn7u0aqfv4.cloudfront.net/assets/fonts/TTNorms-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.sofi-gnav {
  display: block;
  position: relative;
  background: #fff;
  border-bottom: 1px solid #dbdad7;
  box-shadow: 0 0 1px 0 rgba(20, 20, 20, 0.10), 0 6px 12px -6px rgba(20, 20, 20, 0.06);
  font-family: "TT Norms", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Normalize inherited text-rendering properties so the nav renders identically
     regardless of which SOFI_CSS bundle the template uses (sofi.css vs
     sofiv4-wrapper.css vs sofi-header-footer.css). */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "pnum";
}

/* sofiv4-wrapper.css sets body { line-height: 1.4 !important } (22.4px at 16px font),
   which cascades into the nav and shifts dropdown panel height on sofi-v4 templates.
   Only override when .sofi-v4 is an ancestor (LP-Polymer-Truffles, LP-Multi-Product-Truffles,
   LP-Truffles-Only) so the baseline page and non-sofi-v4 ITPs are unaffected.
   Desktop uses 24px (absolute) to lock the dropdown height independent of font-size.
   Mobile uses 1.5 (unitless) so 18px drawer items get 27px line-height, matching
   sofi.css's body { line-height: 1.5 } inheritance on the baseline page. */
.sofi-v4 .sofi-gnav {
  line-height: 24px;
}

.sofi-gnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sofi-gnav a {
  color: inherit;
  text-decoration: none;
}

/* This file and the next several blocks individually out-specificity sofiv4-wrapper.css
   rule by rule. wp_enqueue_style()'s SOFI_CSS dependency only controls load order, which
   has no effect here since sofiv4-wrapper.css wins on specificity, not source order. A
   future cleanup should replace these per-selector overrides with a single mechanism
   (e.g. :where() to zero out the wrapper's specificity, or a CSS @layer) so new .sofi-gnav
   elements don't need their own re-assertion against sofiv4-wrapper.css. */

/* polymer-truffles pages wrap .header-wrapper in .sofi-v4, raising the specificity of
   the legacy button styles (sofiv4-wrapper.css: .sofi-v4 .header-wrapper button, 0-2-1)
   above our bare reset (0-1-1). Extend the reset selector to match that specificity. */
.sofi-gnav button,
.header-wrapper .sofi-gnav button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* Width-pinning utility for layout-shift-free bold-on-hover (L0/L1/L2 labels).
   TT Norms ships as three static woff2 faces (400/500/700) with no variable
   axis, so a 500->700 weight swap changes glyph advance widths and re-flows
   whatever sits next to the label. Fix: size the box off an invisible copy
   of the label at the RESTING weight, then take the visible text out of
   flow so it cannot contribute to that width — the 700 face simply
   overflows symmetrically into the control's existing horizontal padding.

   Invariants — do not "simplify" these away:
   1. This goes on a span INSIDE the flex link/button, never on the flex
      container itself — a ::before/::after on a flex container becomes an
      extra flex item and adds width instead of reserving it.
   2. The sizer is a pseudo-element, never a duplicated real element.
      mobile-drawer.js's getControlLabel() builds the drawer Back-button
      label from the control's cloned textContent; a real duplicate node
      would render as "BankBank".
   3. visibility: hidden (not width/height: 0) is what keeps the generated
      text out of the accessible-name computation in Chrome/Safari. */
.sofi-gnav .sofi-gnav__bold-reserve {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

/* Sizer: an invisible copy of the label at the resting weight fixes the box
   width. font-weight is declared here so it cannot inherit the :hover 700. */
.sofi-gnav .sofi-gnav__bold-reserve::before {
  content: attr(data-label);
  display: block;
  visibility: hidden;
  font-weight: 500;
}

/* Visible text is out of flow so it never contributes to the box's
   intrinsic width; bold glyphs overflow symmetrically into the control's
   horizontal padding. Centring is a no-op at rest (box width == text
   width) — it only makes the bold overflow symmetric. */
.sofi-gnav .sofi-gnav__bold-reserve-text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Left-aligned variant — L2 rail labels sit against the icon, not centred.
   Only the visible text is re-anchored left; the ::before sizer above still
   sets the box's width from centred content flow. That's fine here because
   the icon occupies the control's left edge and the right-hand padding is
   what absorbs the bold overflow, so an asymmetric (left-anchored) overflow
   is the correct behaviour, not a side effect to guard against. */
.sofi-gnav .sofi-gnav__bold-reserve--start .sofi-gnav__bold-reserve-text {
  left: 0;
  transform: none;
}

.sofi-gnav__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto;
  padding: 0 1rem;
  min-height: 48px;
}

/* sofiv4-wrapper.css: .sofi-v4 nav { display: block } (0-1-1) beats .sofi-gnav__bar { display: flex } (0-1-0) on polymer-truffles pages. */
.sofi-v4 .sofi-gnav__bar {
  display: flex;
}

.sofi-gnav__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.sofi-gnav__logo:focus-visible {
  outline: 2px solid #00a2c7;
  outline-offset: 2px;
}

.sofi-gnav__logo-img {
  display: block;
  width: 84px;
  height: 24px;
}

.sofi-gnav__heading-wrap {
  display: flex;
  align-items: center;
}

.sofi-gnav__heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 1rem 0 0.5rem;
}

.sofi-gnav__menu {
  display: flex;
  align-items: center;
  flex: 1;
}

.sofi-gnav__menu--main {
  gap: 0.25rem;
}

.sofi-gnav__menu-item {
  position: relative;
}

.sofi-gnav__menu-link {
  display: block;
  padding: 0.5rem 0.75rem;
}

.sofi-gnav .sofi-gnav__hamburger {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* The 0-2-1 reset above beats the 0-2-0 hamburger rule on pages with .header-wrapper. Re-assert at 0-3-1. */
.header-wrapper .sofi-gnav button.sofi-gnav__hamburger {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 0.5rem;
  margin-right: -0.5rem;
  display: inline-flex;
  align-items: center;
}

.sofi-gnav .sofi-gnav__hamburger:focus-visible {
  outline: 2px solid #00a2c7;
  outline-offset: 2px;
}

.sofi-gnav__hamburger-bars {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
}

.sofi-gnav__hamburger-bars::before,
.sofi-gnav__hamburger-bars::after,
.sofi-gnav__hamburger-bar {
  content: '';
  display: block;
  position: absolute;
  left: 2px;
  right: 2px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.sofi-gnav__hamburger-bars::before { top: 5px; }
.sofi-gnav__hamburger-bar         { top: 50%; transform: translateY(-50%); }
.sofi-gnav__hamburger-bars::after  { bottom: 5px; }

.sofi-gnav__hamburger[aria-expanded="true"] .sofi-gnav__hamburger-bars::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.sofi-gnav__hamburger[aria-expanded="true"] .sofi-gnav__hamburger-bar {
  opacity: 0;
}

.sofi-gnav__hamburger[aria-expanded="true"] .sofi-gnav__hamburger-bars::after {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.sofi-gnav__dropdown-control {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: 0;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}

/* .header-wrapper applies a border to button:hover/focus: override it here.
   These buttons all have border: 0 as their base state, so border: none keeps
   layout stable. */
.header-wrapper .sofi-gnav button.sofi-gnav__dropdown-control:hover,
.header-wrapper .sofi-gnav button.sofi-gnav__dropdown-control:focus,
.header-wrapper .sofi-gnav button.sofi-gnav__submenu-rail-control:hover,
.header-wrapper .sofi-gnav button.sofi-gnav__submenu-rail-control:focus,
.header-wrapper .sofi-gnav button.sofi-gnav__drawer-back:hover,
.header-wrapper .sofi-gnav button.sofi-gnav__drawer-back:focus {
  border: none;
  color: inherit;
  overflow: visible;
}

/* Hamburger base state is border: 2px solid transparent, so hover/focus must
   match to avoid a 4px width collapse that shifts adjacent CTAs. */
.header-wrapper .sofi-gnav button.sofi-gnav__hamburger:hover,
.header-wrapper .sofi-gnav button.sofi-gnav__hamburger:focus {
  border: 2px solid transparent;
  color: inherit;
  overflow: visible;
}

/* Default closed state: JS toggles aria-hidden to show/hide. */
.sofi-gnav__dropdown-content[aria-hidden="true"] {
  display: none;
}

.sofi-gnav__dropdown-content {
  background: #fff;
  border: 1px solid #f0f0f0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 1rem;
}

.sofi-gnav__submenu {
  display: flex;
  gap: 1.5rem;
}

.sofi-gnav__submenu-rail {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  border-right: 1px solid #eee;
  padding-right: 1rem;
}

.sofi-gnav__submenu-rail-item {
  list-style: none;
  margin-right: 40px;
}

.sofi-gnav__submenu-rail-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 0;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.sofi-gnav__submenu-rail-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sofi-gnav__chevron {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 0.25em;
}

.sofi-gnav__submenu-panels {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}

.sofi-gnav__submenu-panel.is-hidden {
  display: none;
}

.sofi-gnav__submenu-panel.is-active {
  display: block;
}

.sofi-gnav__cols {
  display: block;
}

.sofi-gnav__cols--1-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.sofi-gnav__col {
  min-width: 0;
}

.sofi-gnav__submenu-column--empty {
  visibility: hidden;
}

.sofi-gnav__submenu-column-title {
  font-weight: 500;
  font-size: 0.875rem;
  color: #706f6e;
  margin: 0 0 0.5rem;
}

.sofi-gnav__submenu-item-link {
  display: block;
  padding: 0.375rem 0;
  font-weight: 500;
}

.sofi-gnav__submenu-pill {
  display: inline-block;
  padding: 0.5rem;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 24px;
  background: #eee;
  color: #333;
  line-height: 18px;
  vertical-align: middle;
}

.sofi-gnav__submenu-pill--default   { background: #fed880; color: #201747; }
.sofi-gnav__submenu-pill--sofi-plus { background: linear-gradient(209deg, #151035 33.08%, #330072 72.73%); color: #fff;}
.sofi-gnav__submenu-pill--crypto    { background: #98d0d9; color: #201747; }

@media (min-width: 1400px) {
  .sofi-gnav__hide-desktop { display: none !important; }

  /* On desktop the wrapper is a transparent flex pass-through for the bar.
     justify-content: flex-end pins the CTAs to the right edge — the L1 menu is
     an absolutely positioned overlay (see #gnav-menu below), so the CTAs are
     the wrapper's only in-flow child and would otherwise sit at its start. */
  .sofi-gnav__drawer-wrapper {
    display: flex;
    flex: 1;
    align-self: stretch;
    align-items: stretch;
    justify-content: flex-end;
  }

  /* Desktop CTAs (Login + Get Started) outside the <ul>. */
  .sofi-gnav .sofi-gnav__desktop-ctas {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 0;
  }

  /* Desktop: dropdowns are absolutely positioned under their trigger. */
  .sofi-gnav__dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    z-index: 9999;
  }

}

@keyframes sofi-gnav-drawer-slidein {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes sofi-gnav-drawer-slideout {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

@keyframes sofi-gnav-l1-slidein {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sofi-gnav-l1-slideout {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

@media (max-width: 1399px) {
  /* Mobile: override sofiv4-wrapper's body { line-height: 1.4 !important } with 1.5
     so 18px drawer items compute 27px line-height, matching sofi.css's body { line-height: 1.5 }
     inheritance on the baseline page. The global .sofi-v4 .sofi-gnav rule uses 24px (fixed)
     for desktop dropdown accuracy; 1.5 (unitless) here ensures font-size-relative scaling. */
  .sofi-v4 .sofi-gnav {
    line-height: 1.5;
  }

  .sofi-gnav__hide-mobile { display: none !important; }

  /*
   * Mobile bar: logo on the left, bar CTAs pushed right of center,
   * hamburger at the far right. Flex `order` positions these elements
   * visually regardless of their DOM order.
   */
  .sofi-gnav__bar {
    flex-wrap: nowrap;
  }
  .sofi-gnav__logo { order: 1; margin-right: auto; }
  .sofi-gnav__heading-wrap { order: 2; }
  .sofi-gnav__bar-login { order: 3; }
  .sofi-gnav__bar-cta { order: 4; }
  .sofi-gnav__hamburger { order: 5; }

  /*
   * Mobile drawer: the wrapper div is the fixed full-height overlay.
   * The wrapper itself scrolls; close button sticks to the top,
   * CTA row sticks to the bottom.
   */
  .sofi-gnav__drawer-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    background: #fff;
    display: flex;
    flex-direction: column;
    z-index: 99999;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sofi-gnav__drawer-wrapper[aria-hidden="true"] {
    display: none;
  }

  /*
   * Hide the drawer by default on mobile/tablet, regardless of aria-hidden.
   * This prevents a one-frame flash when the viewport shrinks from desktop
   * width: the drawer has no aria-hidden on desktop (needed for screen reader
   * access to nav links), so without this rule it would briefly appear as the
   * CSS layout switches before JS can set aria-hidden.
   */
  body:not(.sofi-gnav-drawer-open) .sofi-gnav__drawer-wrapper {
    display: none;
  }

  .sofi-gnav__drawer-wrapper:not([aria-hidden="true"]):not(.is-closing) {
    animation: sofi-gnav-drawer-slidein 0.3s ease forwards;
  }

  .sofi-gnav__drawer-wrapper.is-closing {
    animation: sofi-gnav-drawer-slideout 0.3s ease forwards;
  }

  .sofi-gnav__menu--main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 24px 1.5rem 1.5rem;
    gap: 0;
  }

  /* CTA row: sticky at the bottom of the scrolling drawer with a frosted
     gradient fade to hint at additional content above. */
  .sofi-gnav__drawer-ctas {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 2.5rem;
    padding: 1.5rem;
    flex-shrink: 0;
    background: #fff; /* fallback */
  }

  @supports (backdrop-filter: blur(4px)) {
    .sofi-gnav__drawer-ctas {
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 50%);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
  }

  .sofi-gnav__drawer-ctas > * {
    flex: 1;
  }

  /*
   * Drill-down: when an L1 submenu is drilled into, hide every other row
   * so the panel has the full drawer surface. The Back button inside the
   * panel is the single affordance back to L1. Also hide the drilled-in
   * L1's own trigger button — once drilled in, that label is conveyed by
   * the rail/category content; leaving the trigger visible would duplicate
   * it above the Back button.
   */
  .sofi-gnav__menu--main.sofi-gnav__menu--drilled > li:not(.is-drilled-in) {
    display: none;
  }
  .sofi-gnav__menu--main.sofi-gnav__menu--drilled .is-drilled-in > .sofi-gnav__dropdown-control {
    display: none;
  }

  /*
   * L1 rows: full-width buttons / links with a thin separator underneath.
   * The chevron on submenu triggers is pushed to the far right by
   * margin-left:auto; on <a> items (no submenu) there is simply no
   * chevron, matching the design.
   */
  .sofi-gnav__menu-item--l1 {
    width: 100%;
  }
  .sofi-gnav__menu-item--l1 .sofi-gnav__dropdown-control,
  .sofi-gnav__menu-item--l1 .sofi-gnav__menu-link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 0;
    font-size: 1rem;
  }
  .sofi-gnav__menu-item--l1 .sofi-gnav__dropdown-control .sofi-gnav__chevron {
    margin-left: auto;
  }
  /* Re-assert display:flex for mobile dropdown controls: sofiv4-wrapper.css
     .sofi-v4 .header-wrapper button (0-2-1) sets display:inline-block,
     overriding the 0-2-0 rule above. */
  .header-wrapper .sofi-gnav button.sofi-gnav__dropdown-control {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .sofi-gnav__menu-item--drawer-heading {
    width: 100%;
    pointer-events: none;
  }

  .sofi-gnav__drawer-section-heading {
    display: block;
    padding: 1rem 0;
    font-size: 18px;
    font-weight: 700;
    color: #1a1919;
    border-bottom: 1px solid #e8e8e8;
  }

  .sofi-gnav__dropdown-content {
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .sofi-gnav__submenu {
    flex-direction: column;
    gap: 0.5rem;
  }

  .sofi-gnav__submenu-rail {
    flex-direction: column;
    border-right: 0;
    border-top: 1px solid #e8e8e8;
    padding-right: 0;
    padding-bottom: 0.5rem;
    min-width: 0;
  }

  /*
   * Three-level drill on mobile:
   *   L1 drill (rail view): show the rail, hide the column panels.
   *   Category drill: hide the rail and the L1 back button, show only the
   *   active category's panel (which carries its own Back button labeled
   *   with the L1 name, e.g. "Bank").
   */
  .sofi-gnav__menu-item--has-submenu .sofi-gnav__submenu-panels {
    display: none;
  }
  .sofi-gnav__menu-item--has-submenu.is-cat-drilled .sofi-gnav__submenu-panels {
    display: block;
  }
  .sofi-gnav__menu-item--has-submenu.is-cat-drilled .sofi-gnav__submenu-rail {
    display: none;
  }
  .sofi-gnav__menu-item--has-submenu.is-cat-drilled .sofi-gnav__drawer-back--l1 {
    display: none;
  }

  .sofi-gnav__cols--1-3 {
    grid-template-columns: 1fr;
    gap: 1rem;
    border-top: 1px solid #e8e8e8;
    padding-top: 1rem;
  }

  /*
   * Back button (injected by mobile-drawer.js). A real <button>, not a
   * link — this is the only way to unwind the drill stack.
   */
  .header-wrapper button.sofi-gnav__drawer-back {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    margin: 15px 0;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    color: #424242;
  }

  .sofi-gnav__drawer-back-icon {
    width: 12px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(-45deg);
    display: inline-block;
    margin-left: 6px;
  }

}

/*
 * Lock body scroll while the mobile drawer is open. mobile-drawer.js also
 * sets inline overflow:hidden; this class hook makes the behavior visible
 * in the DOM for debugging and lets ancestors disable pointer-events if
 * needed.
 */
body.sofi-gnav-drawer-open {
  overflow: hidden;
}

@media (max-width: 1399px) {
  .sofi-gnav {
    transition: box-shadow 0.3s ease;
  }

  .sofi-gnav__bar-login,
  .sofi-gnav__bar-cta {
    transition: opacity 0.3s ease, visibility 0s linear;
  }

  body.sofi-gnav-drawer-open .sofi-gnav {
    box-shadow: none;
    min-height: 77px;
  }

  body.sofi-gnav-drawer-open .sofi-gnav__bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100000;
    box-sizing: content-box;
    background: #fff;
    border-bottom: 1px solid #dbdad7;
  }

  body.sofi-gnav-drawer-open .sofi-gnav__drawer-wrapper {
    top: 77px;
  }

  body.sofi-gnav-drawer-open .sofi-gnav__bar-login,
  body.sofi-gnav-drawer-open .sofi-gnav__bar-cta {
    opacity: 0;
    visibility: hidden;
    animation: sofi-gnav-cta-fade-out 0.3s ease both;
    transition-delay: 0s, 0.3s;
  }
}

body.sofi-gnav-drawer-cta-fade-in .sofi-gnav__bar-login,
body.sofi-gnav-drawer-cta-fade-in .sofi-gnav__bar-cta {
  animation: sofi-gnav-cta-fade-in 0.3s ease both;
}

@keyframes sofi-gnav-cta-fade-out {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes sofi-gnav-cta-fade-in {
  from {
    opacity: 0;
    visibility: visible;
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}

@media (min-width: 1400px) {
  /* Nav container — constrained to 90rem so it doesn't stretch beyond the page
     on wide viewports, matching body.l-body-max-page-width .global-header */
  .sofi-gnav {
    max-width: 90rem;
    margin-left: auto;
    margin-right: auto;
    border-bottom-color: #dbdad7;
  }

  .sofi-gnav__bar {
    min-height: 76px;
    padding: 0 20px;
    /* Containing block for the absolutely positioned L1 dropdown panels.
       This decouples dropdown positioning from the header height, so adding
       the L0 bar above the nav bar does not shift the panels. */
    position: relative;
  }

  .sofi-gnav__logo-img {
    width: 106px;
    height: 28px;
  }

  /* Center the L1 links across the full nav width, not just the space left of
     the CTAs. #gnav-menu is stretched edge-to-edge over .sofi-gnav__bar as an
     absolutely positioned overlay and centers its items with justify-content;
     because the overlay spans the whole bar, "centered within the menu" equals
     "centered on the nav," and it stays correct regardless of logo width, an
     optional heading, or missing CTAs. Spanning inset: 0 also keeps #gnav-menu
     as the full-width containing block for the L1 dropdown panels
     (left: 0; width: 100%), so the mega menu stays edge-to-edge. The empty
     track on either side of the centered items sits over the logo and CTAs, so
     the <ul> is pointer-events: none (letting their clicks through) and each
     <li> re-enables pointer events; keyboard focus order is unaffected. */
  #gnav-menu {
    position: absolute;
    inset: 0;
    justify-content: center;
    pointer-events: none;
  }

  #gnav-menu > .sofi-gnav__menu-item {
    pointer-events: auto;
  }

  #gnav-menu > .sofi-gnav__menu-item--l1 {
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  /* Nav item links and dropdown triggers */
  .sofi-gnav .sofi-gnav__menu-link,
  .sofi-gnav .sofi-gnav__dropdown-control {
    padding: 8px 12px;
    gap: 4px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #1a1919;
    background: transparent;
    white-space: nowrap;
  }

  .sofi-gnav .sofi-gnav__dropdown-control:hover,
  .sofi-gnav .sofi-gnav__dropdown-control:focus-visible,
  .sofi-gnav .sofi-gnav__dropdown-control[aria-expanded="true"] {
    color: #1a1919;
    font-weight: 700;
    background: transparent;
    border: 0;
  }

  /* The 0-2-1 reset beats the 0-2-0 dropdown-control rule. Re-assert at 0-3-1.
     Also re-assert display:flex so sofiv4-wrapper.css's .sofi-v4 .header-wrapper button { display:inline-block } (0-2-1)
     does not collapse the flex layout. */
  .header-wrapper .sofi-gnav button.sofi-gnav__dropdown-control {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 4px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #1a1919;
    background: transparent;
    white-space: nowrap;
  }

  .header-wrapper .sofi-gnav button.sofi-gnav__dropdown-control:hover,
  .header-wrapper .sofi-gnav button.sofi-gnav__dropdown-control:focus-visible,
  .header-wrapper .sofi-gnav button.sofi-gnav__dropdown-control[aria-expanded="true"] {
    font-weight: 700;
  }

  /* .sofi-gnav__menu-link is display:block at the base breakpoint (the gap: 4px
     above is inert on it), so it needs an explicit flex context here to match
     .sofi-gnav__dropdown-control — the bold-reserve span must sit inside a flex
     container it does not itself become a flex item of the wrong axis. */
  .sofi-gnav .sofi-gnav__menu-item--l1 .sofi-gnav__menu-link {
    display: flex;
    align-items: center;
  }

  /* L1 leaf links now bold on hover/focus for parity with dropdown triggers. */
  .sofi-gnav .sofi-gnav__menu-item--l1 .sofi-gnav__menu-link:hover,
  .sofi-gnav .sofi-gnav__menu-item--l1 .sofi-gnav__menu-link:focus {
    font-weight: 700;
  }

  .sofi-gnav .sofi-gnav__dropdown-control:focus-visible {
    outline: 2px solid #00a2c7;
    outline-offset: -2px;
    border-radius: 2px;
  }

  .sofi-gnav .sofi-gnav__menu-item--l1 .sofi-gnav__menu-link:focus-visible {
    outline: 2px solid #00a2c7;
    outline-offset: -2px;
  }

  /* Desktop chevron: a CSS-only ::after, independent of the real
     .sofi-gnav__chevron span (that stays mobile-only — see
     sofi-gnav__hide-desktop). Width is always reserved via opacity/visibility
     (not display), so toggling it never shifts layout. */
  .sofi-gnav .sofi-gnav__dropdown-control::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(135deg);
    margin-left: 3px;
    opacity: 0;
    visibility: hidden;
  }

  .sofi-gnav .sofi-gnav__dropdown-control:hover::after,
  .sofi-gnav .sofi-gnav__dropdown-control:focus-visible::after,
  .sofi-gnav .sofi-gnav__dropdown-control[aria-expanded="true"]::after {
    margin-top: -3px;
    opacity: 1;
    visibility: visible;
  }

  .sofi-gnav .sofi-gnav__login-cta,
  .sofi-gnav .sofi-gnav__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
    transition: background 0.15s ease, opacity 0.3s ease, visibility 0s linear;
  }

  /* Login — outlined cerulean */
  .sofi-gnav .sofi-gnav__login-cta {
    border: 2px solid #00a2c7;
    background: transparent;
    color: #00a2c7;
  }

  .sofi-gnav .sofi-gnav__login-cta:hover,
  .sofi-gnav .sofi-gnav__login-cta:focus {
    border-color: #0080a3;
    color: #0080a3;
  }

  .sofi-gnav .sofi-gnav__login-cta:focus-visible {
    outline: 2px solid #00a2c7;
    outline-offset: 2px;
  }

  /* CTA — filled cerulean */
  .sofi-gnav .sofi-gnav__cta-button {
    border: 2px solid transparent;
    background: #00a2c7;
    color: #fff;
  }

  .sofi-gnav .sofi-gnav__cta-button:hover,
  .sofi-gnav .sofi-gnav__cta-button:focus {
    background: #0080a3;
    color: #fff;
  }

  .sofi-gnav .sofi-gnav__cta-button:focus-visible {
    outline: 2px solid #00a2c7;
    outline-offset: 2px;
  }
}

@media (min-width: 1400px) {
  /* Remove position:relative from menu items so the L1 panel is positioned
     relative to .sofi-gnav__bar, enabling a full-width dropdown. */
  .sofi-gnav .sofi-gnav__menu-item {
    position: static;
  }

  .sofi-gnav .sofi-gnav__dropdown-content--l1 {
    top: calc(100% + 1px); /* 1px to show the bottom border of the nav */
    left: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    border: 0;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 0 1px 0 rgba(20, 20, 20, 0.10), 0 6px 12px -6px rgba(20, 20, 20, 0.06);
    padding: 28px 68px;
    box-sizing: border-box;
  }

  /* Slide down on open, slide up on close. Keyed on the explicit is-opening /
     is-closing classes (set by mega-menu.js's showAnimated()/hideAnimated())
     rather than inferred from aria-hidden, so "an animation is running" is a
     JS-owned fact instead of a two-attribute guess. Keep this 0.2s in sync
     with l1-transition-queue.js's L1_ANIMATION_MS — there is no build step
     wiring the two together. */
  .sofi-gnav .sofi-gnav__dropdown-content--l1.is-opening {
    animation: sofi-gnav-l1-slidein 0.2s ease forwards;
  }

  /* Keep this 0.2s in sync with L1_ANIMATION_MS — see the comment above. */
  .sofi-gnav .sofi-gnav__dropdown-content--l1.is-closing {
    display: block !important;
    animation: sofi-gnav-l1-slideout 0.2s ease forwards;
    /* A fading-out panel shouldn't swallow a click meant for whatever's
       underneath it, and this bounds the damage from a stuck is-closing. */
    pointer-events: none;
  }

  .sofi-gnav .sofi-gnav__submenu {
    gap: 40px;
    align-items: flex-start;
  }

  .sofi-gnav .sofi-gnav__submenu-rail {
    min-width: 260px;
    flex-shrink: 0;
    align-self: stretch;
    border-right: 1px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0;
    padding-right: 0;
    padding-bottom: 0;
    gap: 4px;
  }

  .sofi-gnav .sofi-gnav__submenu-rail-control {
    width: 260px;
    min-height: 40px;
    border-radius: 12px;
    padding: 6px 12px;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    color: #1a1919;
    background: transparent;
    display: flex;
  }

  .sofi-gnav .sofi-gnav__submenu-rail-control:hover,
  .sofi-gnav .sofi-gnav__submenu-rail-control:focus {
    background: rgba(32, 23, 71, 0.06);
    color: #1a1919;
    font-weight: 700;
  }

  .sofi-gnav .sofi-gnav__submenu-rail-control:focus-visible {
    outline: 2px solid #00a2c7;
    outline-offset: -2px;
    border-radius: 2px;
  }

  .sofi-gnav .sofi-gnav__submenu-rail-icon {
    width: 16px;
    height: 16px;
    filter: brightness(0);
  }

  .sofi-gnav .sofi-gnav__submenu-rail-item.is-active .sofi-gnav__submenu-rail-icon {
    filter: brightness(0) invert(1);
  }

  .sofi-gnav .sofi-gnav__submenu-rail-item.is-active .sofi-gnav__submenu-rail-control {
    background: #201747;
    color: #fff;
    font-weight: 700;
  }

  /* The active rail control is 700 at rest — its sizer must match, or the
     already-bold active label would visibly narrow. */
  .sofi-gnav .sofi-gnav__submenu-rail-item.is-active .sofi-gnav__bold-reserve::before {
    font-weight: 700;
  }

  .sofi-gnav .sofi-gnav__submenu-rail-item.is-active .sofi-gnav__submenu-rail-control:hover,
  .sofi-gnav .sofi-gnav__submenu-rail-item.is-active .sofi-gnav__submenu-rail-control:focus {
    background: #201747;
    color: #fff;
    border: none;
  }

  /* The 0-2-1 reset beats the 0-2-0 rail-control rule. Re-assert at 0-3-1.
     Also re-assert display:flex so sofiv4-wrapper.css's .sofi-v4 .header-wrapper button
     { display:inline-block } (0-2-1) does not override the flex layout on sofi-v4 templates. */
  .header-wrapper .sofi-gnav button.sofi-gnav__submenu-rail-control {
    display: flex;
    align-items: center;
    border-radius: 12px;
    padding: 6px 12px;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    color: #1a1919;
  }

  /* sofiv4-wrapper.css sets .sofi-v4 .header-wrapper button { font-weight: 700 }
     at 0-2-1, which is why the rule above re-asserts 500 at 0-3-1. Restore the
     hover/focus weight at 0-4-1 — a 0-3-0 hover rule (the one above) would lose
     to it on sofi-v4 templates. Mirrors the dropdown-control re-assert above. */
  .header-wrapper .sofi-gnav button.sofi-gnav__submenu-rail-control:hover,
  .header-wrapper .sofi-gnav button.sofi-gnav__submenu-rail-control:focus {
    font-weight: 700;
  }

  .sofi-gnav .sofi-gnav__submenu-rail-chevron {
    width: 8px;
    height: 8px;
    border-top-width: 1.5px;
    border-right-width: 1.5px;
    transform: rotate(45deg);
    margin-left: auto;
    margin-top: 2px;
    flex-shrink: 0;
    opacity: 0;
  }

  .sofi-gnav .sofi-gnav__submenu-rail-item.is-active .sofi-gnav__submenu-rail-chevron {
    opacity: 1;
  }

  .sofi-gnav .sofi-gnav__cols--1-3 {
    gap: 40px;
  }

  .sofi-gnav .sofi-gnav__submenu-column-title {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 24px;
    color: #706f6e;
    text-transform: none;
    margin: 0 0 8px;
  }

  /* sofiv4-wrapper.css: .sofi-v4 .header-wrapper p { margin: 0 0 .75em } (0-2-1) beats the
     0-2-0 rule above for <p class="sofi-gnav__submenu-column-title"> elements on sofi-v4
     templates. Re-assert at 0-3-1 so the baseline margin is preserved on all templates. */
  .header-wrapper .sofi-gnav p.sofi-gnav__submenu-column-title {
    margin: 0 0 8px;
  }

  .sofi-gnav .sofi-gnav__submenu-item-link {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 4px 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    color: #1a1919;
  }

  .sofi-gnav .sofi-gnav__submenu-item-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }


  /* L3 is colour-only on hover/focus by design. TT Norms has no variable axis, so a
     weight change here would re-flow the 3-column grid. Do not re-add font-weight —
     see .sofi-gnav__bold-reserve. */
  .sofi-gnav .sofi-gnav__submenu-panel .sofi-gnav__submenu-item .sofi-gnav__submenu-item-link:hover,
  .sofi-gnav .sofi-gnav__submenu-panel .sofi-gnav__submenu-item .sofi-gnav__submenu-item-link:focus {
    color: #00a2c7;
  }

  .sofi-gnav .sofi-gnav__submenu-panel .sofi-gnav__submenu-item .sofi-gnav__submenu-item-link:hover .sofi-gnav__submenu-item-label,
  .sofi-gnav .sofi-gnav__submenu-panel .sofi-gnav__submenu-item .sofi-gnav__submenu-item-link:focus .sofi-gnav__submenu-item-label {
    color: #00a2c7;
  }

  /* Suppress hover highlight while the panel slides in so the first link does
     not turn cerulean when the panel slides under a stationary cursor. Same
     specificity as the rules above — placed after them to win by source order.
     Removed on animationend by mega-menu.js (is-opening class). */
  .sofi-gnav .sofi-gnav__dropdown-content--l1.is-opening .sofi-gnav__submenu-item-link:hover,
  .sofi-gnav .sofi-gnav__dropdown-content--l1.is-opening .sofi-gnav__submenu-item-link:hover .sofi-gnav__submenu-item-label {
    color: #1a1919;
  }
}

/* Belt-and-braces with mega-menu.js's prefersReducedMotion() short-circuit (which skips
   the animationend listener/fallback timer entirely) — this covers anyone who flips the
   OS setting mid-session without a page reload. Covers both the L1 dropdown and the
   mobile drawer, since mobile-drawer.js's animationend handling makes the same assumption. */
@media (prefers-reduced-motion: reduce) {
  .sofi-gnav .sofi-gnav__dropdown-content--l1.is-opening,
  .sofi-gnav .sofi-gnav__dropdown-content--l1.is-closing,
  .sofi-gnav .sofi-gnav__drawer-wrapper:not([aria-hidden="true"]):not(.is-closing),
  .sofi-gnav .sofi-gnav__drawer-wrapper.is-closing {
    animation: none;
  }

  .sofi-gnav__hamburger-bars::before,
  .sofi-gnav__hamburger-bars::after,
  .sofi-gnav__hamburger-bar {
    transition: none;
  }

  .sofi-gnav,
  .sofi-gnav__bar-login,
  .sofi-gnav__bar-cta {
    transition: none;
  }

  body.sofi-gnav-drawer-open .sofi-gnav__bar-login,
  body.sofi-gnav-drawer-open .sofi-gnav__bar-cta,
  body.sofi-gnav-drawer-cta-fade-in .sofi-gnav__bar-login,
  body.sofi-gnav-drawer-cta-fade-in .sofi-gnav__bar-cta {
    animation: none;
  }
}

@media (max-width: 1399px) {
  .sofi-gnav__bar {
    min-height: 76px;
    gap: 16px;
  }

  .sofi-gnav__logo-img {
    width: 103px;
    height: 28px;
  }

  /* Bar CTA (tablet/mobile bar, hidden on desktop) */
  .sofi-gnav .sofi-gnav__bar-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: #00a2c7;
    color: #fff;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
    transition: background 0.15s ease, opacity 0.3s ease, visibility 0s linear;
  }

  .sofi-gnav .sofi-gnav__bar-cta:hover,
  .sofi-gnav .sofi-gnav__bar-cta:focus {
    background: #0080a3;
    color: #fff;
  }

  .sofi-gnav .sofi-gnav__bar-cta:focus-visible {
    outline: 2px solid #00a2c7;
    outline-offset: 2px;
  }
}

@media (max-width: 767px) {
  #gnav-menu {
    padding: 0 16px;
  }

  .sofi-gnav__bar {
    padding: 0 16px;
  }

  .sofi-gnav__menu-item--l1 .sofi-gnav__dropdown-control .sofi-gnav__chevron,
  .sofi-gnav__submenu-rail-control .sofi-gnav__submenu-rail-chevron {
    margin-right: 12px;
  }

  /* Hide login button */
  .sofi-gnav__bar-login {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1399px) {
  :root {
    --sofi-gnav-tablet-padding: 34px;
  }

  #gnav-menu {
    padding: 24px var(--sofi-gnav-tablet-padding);
  }

  .sofi-gnav .sofi-gnav__bar-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 2px solid #00a2c7;
    background: transparent;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: #00a2c7;
    white-space: nowrap;
    transition: background 0.15s ease, opacity 0.3s ease, visibility 0s linear;
  }

  .sofi-gnav .sofi-gnav__bar-login:hover,
  .sofi-gnav .sofi-gnav__bar-login:focus {
    border-color: #0080a3;
    color: #0080a3;
  }

  .sofi-gnav .sofi-gnav__bar-login:focus-visible {
    outline: 2px solid #00a2c7;
    outline-offset: 2px;
  }
}

@media (max-width: 1399px) {

  /* L1 items */
  .sofi-gnav .sofi-gnav__menu-item--l1 .sofi-gnav__dropdown-control,
  .sofi-gnav .sofi-gnav__menu-item--l1 .sofi-gnav__menu-link {
    margin-bottom: -1px;
    min-height: 58px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 18px;
    font-weight: 500;
    color: #262626;
    text-transform: capitalize;
  }

  /* L2 rail items */
  .sofi-gnav .sofi-gnav__submenu-rail-item {
    margin-right: 0;
  }

  .sofi-gnav .sofi-gnav__submenu-rail-control {
    min-height: 58px;
    padding: 0;
    font-size: 18px;
    font-weight: 500;
    color: #262626;
    display: flex;
  }

  /* The 0-2-1 reset beats the 0-2-0 rail-control rule. Re-assert at 0-3-1. */
  .header-wrapper .sofi-gnav button.sofi-gnav__submenu-rail-control {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
  }

  .sofi-gnav .sofi-gnav__submenu-rail-icon {
    filter: brightness(0);
  }

  /* Rail chevron: right-aligned, always visible on mobile/tablet */
  .sofi-gnav .sofi-gnav__submenu-rail-chevron {
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Back button */
  .sofi-gnav .sofi-gnav__drawer-back {
    font-size: 18px;
    font-weight: 500;
    color: #424242;
  }

  /* Drawer login button */
  .sofi-gnav .sofi-gnav__drawer-ctas #nav-log-in-mobile {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #201747;
    border-radius: 20px;
    padding: 20px 40px;
    color: #201747;
    font-size: 18px;
    font-weight: 700;
    max-height: 60px;
    max-width: fit-content;
  }

  .sofi-gnav .sofi-gnav__drawer-ctas #nav-log-in-mobile:focus-visible {
    outline: 2px solid #00a2c7;
    outline-offset: 2px;
  }

  /* Drawer CTA button */
  .sofi-gnav .sofi-gnav__drawer-ctas .sofi-gnav__cta-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #201747;
    color: #fff;
    border: 2px solid transparent;
    border-radius: 20px;
    padding: 20px 40px;
    font-size: 18px;
    font-weight: 700;
    max-height: 60px;
    max-width: fit-content;
  }

  .sofi-gnav .sofi-gnav__drawer-ctas .sofi-gnav__cta-button:focus-visible {
    outline: 2px solid #00a2c7;
    outline-offset: 2px;
  }
}

@media (max-width: 767px) {
  .sofi-gnav__drawer-ctas {
    flex-direction: column;
    gap: 20px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 20px;
  }

  /* Full-width stacked buttons on mobile — override the fit-content cap
     set in the shared drawer rule so both buttons span the full drawer width. */
  .sofi-gnav .sofi-gnav__drawer-ctas #nav-log-in-mobile,
  .sofi-gnav .sofi-gnav__drawer-ctas .sofi-gnav__cta-button {
    max-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1399px) {
  .sofi-gnav__menu-item--l1 .sofi-gnav__dropdown-control .sofi-gnav__chevron,
  .sofi-gnav__submenu-rail-control .sofi-gnav__submenu-rail-chevron {
    margin-right: 9px;
  }

  .sofi-gnav__menu--main {
    padding-left: var(--sofi-gnav-tablet-padding);
    padding-right: var(--sofi-gnav-tablet-padding);
  }

  .sofi-gnav__drawer-ctas {
    padding-left: var(--sofi-gnav-tablet-padding);
    padding-right: var(--sofi-gnav-tablet-padding);
    padding-bottom: var(--sofi-gnav-tablet-padding);
    justify-content: flex-end;
  }

  .sofi-gnav__drawer-ctas > * {
    flex: 0 0 auto;
  }

  .sofi-gnav__bar {
    padding-left: var(--sofi-gnav-tablet-padding);
    padding-right: var(--sofi-gnav-tablet-padding);
  }
}

/* OneTrust SDK uses z-index: 2147483646 — Lower it while the drawer is open so the drawer takes precedence. */
body.sofi-gnav-drawer-open #onetrust-pc-sdk,
body.sofi-gnav-drawer-open #ot-sdk-btn-floating {
  z-index: 1 !important;
}

/* ── L0 audience tab bar ─────────────────────────────────────────────────── */
/*
 * Desktop-only: 36px bar with tabs sitting at the bottom edge so they visually
 * connect with the nav bar below. Hidden on mobile/tablet via a max-width media
 * query at the end of this section; inactive L0 sections render as plain
 * L1-styled rows inside the mobile drawer instead.
 */

.sofi-gnav__l0-bar {
  display: block;
  background: #f0eeeb;
  /* Mobile/tablet: 76px with a 22px top offset before the 54px tab strip. */
  height: 76px;
  position: relative;
  overflow: hidden;
}

/* Tab strip — mobile/tablet: absolutely positioned 54px strip inside the 76px bar.
   Scoped to .sofi-gnav to beat the (0,1,1) reset on .sofi-gnav ul. */
.sofi-gnav .sofi-gnav__l0-tabs {
  display: flex;
  flex-wrap: nowrap;
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 54px;
  /* stretch so each tab fills the full 54px — bottom edge flush with the nav bar */
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0;
  margin: 0 0 0 18px;
}

.sofi-gnav .sofi-gnav__l0-tabs::-webkit-scrollbar {
  display: none;
}

.sofi-gnav__l0-tab {
  display: flex;
}

/* Right-edge fade hints at horizontal scroll on mobile/tablet. */
.sofi-gnav__l0-bar::after {
  content: '';
  position: absolute;
  right: 0;
  top: 22px;
  height: 54px;
  width: 60px;
  background: linear-gradient(to left, #f0eeeb 30%, transparent);
  pointer-events: none;
  z-index: 1;
}

.sofi-gnav__l0-tab-link {
  display: flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 12px 12px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: #1a1919;
  font-weight: 500;
  white-space: nowrap;
  text-transform: capitalize;
}

.sofi-gnav__l0-tab--active .sofi-gnav__l0-tab-link {
  background: #fff;
  font-weight: 700;
}

/* The active tab is 700 at rest, so its sizer must match 700 too — otherwise
   the sizer would fix the box at the narrower 500-weight width and the
   already-bold active pill would visibly narrow. */
.sofi-gnav__l0-tab--active .sofi-gnav__bold-reserve::before {
  font-weight: 700;
}

.sofi-gnav__l0-tab-link:hover,
.sofi-gnav__l0-tab-link:focus {
  background: rgba(255, 255, 255, 0.6);
  color: #1a1919;
  font-weight: 700;
}

.sofi-gnav__l0-tab--active .sofi-gnav__l0-tab-link:hover,
.sofi-gnav__l0-tab--active .sofi-gnav__l0-tab-link:focus {
  background: #fff;
}

.sofi-gnav__l0-tab-link:focus-visible {
  outline: 2px solid #00a2c7;
  outline-offset: -2px;
  border-radius: 12px 12px 0 0;
}

/* Desktop: 36px bar, tabs static and aligned to the bottom edge. */
@media (min-width: 1400px) {
  .sofi-gnav__l0-bar {
    height: 36px;
    overflow: visible;
  }

  /* No scroll fade needed on desktop. */
  .sofi-gnav__l0-bar::after {
    display: none;
  }

  .sofi-gnav .sofi-gnav__l0-tabs {
    position: static;
    height: 100%;
    overflow: visible;
    scrollbar-width: auto;
    align-items: flex-end;
    margin-left: 24px;
  }

  .sofi-gnav .sofi-gnav__l0-tabs::-webkit-scrollbar {
    display: unset;
  }
}

/*
 * Right-aligned utility links (e.g. "Support") — desktop only, hidden via
 * sofi-gnav__hide-mobile below 1400px. Absolutely positioned against
 * .sofi-gnav__l0-bar (position: relative; overflow: visible at >= 1400px)
 * so the tabs' own layout above is untouched.
 */
.sofi-gnav .sofi-gnav__l0-links {
  display: flex;
  align-items: center;
  gap: 24px;
  position: absolute;
  top: 6px;
  right: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sofi-gnav .sofi-gnav__l0-link {
  display: flex;
}

/*
 * Scoped under .sofi-gnav to beat the (0,1,1) .sofi-gnav a { color: inherit }
 * reset. transition: none overrides an ambient `a { transition: color … }`
 * rule from an unrelated third-party stylesheet (the WP-React builder CSS)
 * that would otherwise animate the hover color change below — the design
 * calls for an instant color swap only, no transition.
 */
.sofi-gnav .sofi-gnav__l0-link-anchor {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #262626;
  white-space: nowrap;
  text-transform: capitalize;
  transition: none;
}

/* Hover/focus: color change only — no weight, underline, or transition change. */
.sofi-gnav .sofi-gnav__l0-link-anchor:hover,
.sofi-gnav .sofi-gnav__l0-link-anchor:focus {
  color: #00a2c7;
}

.sofi-gnav .sofi-gnav__l0-link-anchor:focus-visible {
  outline: 2px solid #00a2c7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Mobile/tablet: hide the page-level L0 bar — no in-drawer duplicate exists;
   inactive L0 sections render as plain L1-styled rows inside the drawer menu. */
@media (max-width: 1399px) {
  .sofi-gnav__l0-bar {
    display: none;
  }

  /* sofiv4-wrapper.css: .sofi-v4 nav { display: block } (0-1-1) beats .sofi-gnav__l0-bar { display: none } (0-1-0) on polymer-truffles pages. */
  .sofi-v4 .sofi-gnav__l0-bar {
    display: none;
  }
}