/* ===========================================================================
   MOBILE CHROME — drawer, header and footer
   Appended layer. Everything here either targets a class that exists only in
   the drawer/footer, or sits inside a max-width query, so the desktop header
   is untouched.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Drawer: close mark in brand blue
   The glyph is a drawn SVG rather than a text "×", so it can take a real
   colour, a real hit area and a real press state.
   -------------------------------------------------------------------------- */
.bs-drawer__close{
  display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;
  padding:0;border:1px solid var(--mist-border,#D6E6F7);border-radius:12px;
  background:var(--mist,#EBF5FF);color:var(--blue,#315CFD);cursor:pointer;
  transition:background 180ms var(--ease-standard,cubic-bezier(.4,0,.2,1)),
             color 180ms var(--ease-standard,cubic-bezier(.4,0,.2,1)),
             transform 140ms var(--ease-standard,cubic-bezier(.4,0,.2,1));
}
.bs-drawer__close:hover,
.bs-drawer__close:focus-visible{background:var(--blue,#315CFD);color:#fff}
.bs-drawer__close:active{transform:scale(.92)}
.bs-drawer__close svg{display:block}

.bs-drawer__head{display:flex;align-items:center;gap:12px}
.bs-drawer__head img{height:26px;width:auto;margin-right:auto}

/* ---------------------------------------------------------------------------
   Drawer rows: the category toggle
   A blue rule grows down the left edge as the row opens, which is the cue that
   ties the header row to the block of links it just revealed.
   -------------------------------------------------------------------------- */
.bs-drawer__row{position:relative}
.bs-drawer__row::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--blue,#315CFD);
  transform:scaleY(0);transform-origin:top center;opacity:0;
  transition:transform 320ms cubic-bezier(.2,.7,.2,1),opacity 200ms linear;
}
.bs-drawer__row.is-open::before{transform:scaleY(1);opacity:1}
.bs-drawer__row.is-open{background:linear-gradient(90deg,rgba(49,92,253,.055),transparent 62%)}

.bs-drawer__toggle{
  gap:12px;transition:color 180ms var(--ease-standard,cubic-bezier(.4,0,.2,1));
  -webkit-tap-highlight-color:transparent;
}
.bs-drawer__row.is-open .bs-drawer__toggle{color:var(--blue,#315CFD)}
/* a short press ripple, so a tap on a phone reads as a tap */
.bs-drawer__toggle:active{transform:scale(.99)}
.bs-drawer__toggle .bs-drawer__chev{
  margin-left:auto;
  transition:transform 320ms cubic-bezier(.2,.7,.2,1),opacity 180ms linear;
}

/* the panel opens on a real animatable property rather than a guessed height */
.bs-drawer__panel{
  display:grid;grid-template-rows:0fr;max-height:none;overflow:hidden;
  transition:grid-template-rows 340ms cubic-bezier(.2,.7,.2,1);
}
/* The 0fr track collapses the content, but a border-box child cannot shrink
   below its own padding — eight closed rows were each still holding 20px open.
   The padding therefore collapses with the track and grows back with it. */
.bs-drawer__panel > *{
  min-height:0;overflow:hidden;padding-block:0;
  transition:padding-block 340ms cubic-bezier(.2,.7,.2,1);
}
.bs-drawer__row.is-open .bs-drawer__panel{grid-template-rows:1fr;max-height:none}
.bs-drawer__row.is-open .bs-drawer__panel > *{padding-block:2px 16px}

/* ---------------------------------------------------------------------------
   Drawer links: icon, name, one line of description
   The IA already carried both; the drawer simply was not showing them.
   -------------------------------------------------------------------------- */
.bs-drawer__group-name{
  display:flex;align-items:center;gap:8px;
  border-bottom:0;padding-bottom:0;margin-bottom:6px;
}
.bs-drawer__group-name::after{
  content:"";flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,var(--blue,#315CFD),rgba(49,92,253,0));
  opacity:.45;
}

.bs-drawer__link{
  display:grid;grid-template-columns:32px minmax(0,1fr);gap:11px;
  align-items:start;min-height:0;padding:9px 10px 9px 6px;
  border-radius:12px;position:relative;
  transition:background 180ms var(--ease-standard,cubic-bezier(.4,0,.2,1));
  -webkit-tap-highlight-color:transparent;
}
.bs-drawer__link:hover,
.bs-drawer__link:focus-visible{background:var(--mist,#EBF5FF)}
.bs-drawer__link:active{background:rgba(49,92,253,.12)}

.bs-drawer__link-ic{
  display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;
  border-radius:10px;background:var(--mist,#EBF5FF);
  border:1px solid var(--mist-border,#D6E6F7);color:var(--blue,#315CFD);
  transition:background 180ms var(--ease-standard,cubic-bezier(.4,0,.2,1)),
             color 180ms var(--ease-standard,cubic-bezier(.4,0,.2,1));
}
.bs-drawer__link:hover .bs-drawer__link-ic,
.bs-drawer__link:active .bs-drawer__link-ic{
  background:var(--blue,#315CFD);color:#fff;
}
.bs-drawer__link-ic svg{display:block}

.bs-drawer__link-txt{display:block;min-width:0}
.bs-drawer__link-name{
  display:block;font-size:14.5px;font-weight:600;line-height:1.32;
  color:var(--navy,#0C163D);
}
.bs-drawer__link:hover .bs-drawer__link-name{color:var(--blue,#315CFD)}
.bs-drawer__link-desc{
  display:block;margin-top:2px;font-size:12px;line-height:1.42;
  color:var(--slate,#415A79);
  /* two lines is the most a menu row should ever ask for */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---------------------------------------------------------------------------
   Drawer footer CTA
   -------------------------------------------------------------------------- */
.bs-drawer__cta{
  gap:9px;height:52px;box-shadow:0 14px 28px -16px rgba(49,92,253,.75);
  transition:background 180ms var(--ease-standard,cubic-bezier(.4,0,.2,1)),
             transform 140ms var(--ease-standard,cubic-bezier(.4,0,.2,1));
}
.bs-drawer__cta:active{transform:scale(.985)}
.bs-drawer__cta svg{flex:0 0 auto;transition:transform 260ms cubic-bezier(.2,.7,.2,1)}
.bs-drawer__cta:hover svg{transform:translateX(3px)}

/* ---------------------------------------------------------------------------
   Footer links now carry a glyph
   -------------------------------------------------------------------------- */
.bs-footer__link{
  display:flex;align-items:flex-start;gap:9px;
}
.bs-footer__link-ic{
  display:grid;place-items:center;width:20px;height:20px;flex:0 0 auto;
  margin-top:1px;border-radius:6px;color:var(--teal,#28DCD1);opacity:.72;
  transition:opacity 180ms linear,background 180ms linear,color 180ms linear;
}
.bs-footer__link-ic svg{display:block}
.bs-footer__link:hover .bs-footer__link-ic{opacity:1}

.bs-footer__block-name{display:flex;align-items:center;gap:8px}

/* ---------------------------------------------------------------------------
   Below the drawer breakpoint
   -------------------------------------------------------------------------- */
@media (max-width:939px){
  /* header: logo, then the audit CTA and the menu together on the right */
  .bs-bar__inner{gap:10px;align-items:center}
  .bs-bar__actions{
    margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto;
  }
  .bs-bar__actions .bs-cta{
    order:1;height:40px;padding-inline:15px;font-size:13px;font-weight:700;
    white-space:nowrap;border-radius:999px;letter-spacing:-.005em;
    box-shadow:0 10px 22px -14px rgba(49,92,253,.9);
  }
  .bs-bar__actions .bs-burger{
    order:2;width:40px;height:40px;flex:0 0 auto;margin-left:0;
    border:1px solid var(--border,#DCE3EF);border-radius:12px;
  }
  .bs-logo{order:0;margin-right:0}

  /* inline only — the block padding belongs to the open/closed state above,
     and setting the shorthand here would put it back on a collapsed row */
  .bs-drawer__inner{padding-inline:16px}
  .bs-drawer__group{margin-bottom:16px}
  .bs-drawer__toggle{padding:0 16px;min-height:58px;font-size:16.5px;font-weight:700}
  .bs-drawer__head{padding-inline:16px}

  /* footer: fewer, wider columns and a tappable row */
  .bs-footer__link{min-height:38px;align-items:center;font-size:14px}
  .bs-footer__link-ic{margin-top:0}
}

@media (max-width:420px){
  /* on the narrowest phones the label is what gets trimmed, not the button */
  .bs-bar__actions .bs-cta{padding-inline:13px;font-size:12.5px}
  .bs-drawer__link-desc{-webkit-line-clamp:2}
}

@media (prefers-reduced-motion:reduce){
  .bs-drawer__row::before,.bs-drawer__panel,.bs-drawer__chev,
  .bs-drawer__cta svg{transition-duration:1ms}
}

/* ---------------------------------------------------------------------------
   Nav labels: moderated weight
   The category labels were set at full navy at semibold, which made the header
   compete with the page. They sit a step back now and come forward on hover.
   bs-nav__t moderated
   -------------------------------------------------------------------------- */
.bs-nav__btn{color:var(--slate,#415A79);font-weight:500}
.bs-nav__btn:hover,
.bs-nav__btn[aria-expanded="true"]{color:var(--navy,#0C163D)}
.bs-drawer__toggle{color:var(--slate,#415A79);font-weight:600}
.bs-drawer__row.is-open .bs-drawer__toggle{color:var(--blue,#315CFD)}