[data-member-save],[data-save-lesson],[data-member-complete],[data-complete-lesson]{transition:.15s}.ms-member-authenticated [data-member-guest-only]{display:none!important}.ms-member-saved{outline:2px solid rgba(27,122,90,.25)}

/* ==========================================================
   MONEYSASTRA DEFINITIVE HEADER GRID — 19 AUG 2026
   Viewport-anchored so page wrappers cannot move the header.
   ========================================================== */

@media (min-width:881px){

  html body header.site > .wrap.bar,
  html body .msw-header > .msw-shell-wrap.msw-head{
    box-sizing:border-box !important;

    /* Do not inherit the page's .wrap/.msw-shell-wrap geometry */
    max-width:none !important;
    width:min(1380px, calc(100vw - 64px)) !important;

    /* Centre against the VIEWPORT, not the page/content wrapper */
    position:relative !important;
    left:50% !important;
    transform:translateX(-50%) !important;

    margin-left:0 !important;
    margin-right:0 !important;
    padding:.8rem 0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:1rem !important;
  }

  /* Exact same brand geometry */
  html body header.site > .wrap.bar > .brand,
  html body .msw-header > .msw-shell-wrap.msw-head > .msw-logo-brand{
    display:flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    gap:.6rem !important;
    margin:0 !important;
    padding:0 !important;
    text-decoration:none !important;
  }

  html body header.site > .wrap.bar > .brand > svg,
  html body .msw-header > .msw-shell-wrap.msw-head > .msw-logo-brand > svg{
    display:block !important;
    width:31px !important;
    height:auto !important;
    flex:0 0 31px !important;
    margin:0 !important;
  }

  html body header.site > .wrap.bar > .brand > b,
  html body .msw-header > .msw-shell-wrap.msw-head > .msw-logo-brand > .msw-logo-wordmark{
    margin:0 !important;
    padding:0 !important;
    font-family:'Poppins',system-ui,sans-serif !important;
    font-size:1.36rem !important;
    font-weight:700 !important;
    line-height:1 !important;
    letter-spacing:-.01em !important;
    white-space:nowrap !important;
  }

  /* Exact same navigation anchoring */
  html body header.site > .wrap.bar > #public-main-nav,
  html body .msw-header > .msw-shell-wrap.msw-head > .msw-nav{
    margin-left:auto !important;
    margin-right:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:1.5rem !important;
  }

  html body header.site > .wrap.bar > #public-main-nav > a,
  html body .msw-header > .msw-shell-wrap.msw-head > .msw-nav > a{
    margin:0 !important;
    font-family:'Poppins',system-ui,sans-serif !important;
    font-size:.9rem !important;
    font-weight:500 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }

  /* Same My MoneySastra button box */
  html body header.site > .wrap.bar > #public-main-nav > .nav-cta,
  html body .msw-header > .msw-shell-wrap.msw-head > .msw-nav > .guest-cta{
    padding:.5rem 1rem !important;
    border-radius:999px !important;
    font-weight:700 !important;
  }
}

@media (max-width:880px){

  html body header.site > .wrap.bar,
  html body .msw-header > .msw-shell-wrap.msw-head{
    box-sizing:border-box !important;
    max-width:none !important;
    width:calc(100vw - 24px) !important;

    position:relative !important;
    left:50% !important;
    transform:translateX(-50%) !important;

    margin-left:0 !important;
    margin-right:0 !important;
    padding:.72rem 0 !important;
  }
}

/* ========================================================== */


/* ============================================================
   MONEYSASTRA PRECISION HEADER LOCK — 19 AUG 2026
   ============================================================ */

@media (min-width:881px){

  html{
    scrollbar-gutter:stable;
  }

  /*
   * Do not let page-level .wrap or .msw-shell-wrap widths determine
   * the physical header coordinates.
   */
  html body header.site > .wrap.bar,
  html body .msw-header > .msw-shell-wrap.msw-head{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;

    width:100% !important;
    max-width:none !important;
    min-height:70px !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;
    box-sizing:border-box !important;
  }

  /*
   * SAME LEFT EDGE on every page.
   * 32px minimum viewport inset.
   * On wide screens, aligns to a centred 1380px design grid.
   */
  html body header.site > .wrap.bar > .brand,
  html body .msw-header > .msw-shell-wrap.msw-head > .msw-logo-brand{
    position:absolute !important;
    left:max(32px, calc((100% - 1380px) / 2)) !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    display:flex !important;
    align-items:center !important;
    gap:.6rem !important;

    margin:0 !important;
    padding:0 !important;
    white-space:nowrap !important;
  }

  /*
   * SAME RIGHT EDGE on every page.
   */
  html body header.site > .wrap.bar > #public-main-nav,
  html body .msw-header > .msw-shell-wrap.msw-head > .msw-nav{
    position:absolute !important;
    right:max(32px, calc((100% - 1380px) / 2)) !important;
    left:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:24px !important;

    margin:0 !important;
    padding:0 !important;
    width:auto !important;
    max-width:none !important;
  }

  /* Exact same navigation typography */
  html body header.site > .wrap.bar > #public-main-nav > a,
  html body .msw-header > .msw-shell-wrap.msw-head > .msw-nav > a{
    margin:0 !important;
    padding:0 !important;

    font-family:'Poppins',system-ui,sans-serif !important;
    font-size:14px !important;
    font-weight:500 !important;
    line-height:1.2 !important;

    white-space:nowrap !important;
  }

  /*
   * Exact CTA box geometry.
   * Public header: .nav-cta
   * account/legal header: .guest-cta
   */
  html body header.site > .wrap.bar > #public-main-nav > a.nav-cta,
  html body .msw-header > .msw-shell-wrap.msw-head > .msw-nav > a.guest-cta{
    padding:12px 18px !important;
    border-radius:999px !important;

    font-size:14px !important;
    font-weight:700 !important;
    line-height:1 !important;
  }

  /* Keep logo geometry consistent too */
  html body header.site > .wrap.bar > .brand > svg,
  html body .msw-header > .msw-shell-wrap.msw-head > .msw-logo-brand > svg{
    width:31px !important;
    height:auto !important;
    flex:0 0 31px !important;
  }

  html body header.site > .wrap.bar > .brand > b,
  html body .msw-header > .msw-shell-wrap.msw-head > .msw-logo-brand > .msw-logo-wordmark{
    font-family:'Poppins',system-ui,sans-serif !important;
    font-size:22px !important;
    font-weight:700 !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
}

/* On mobile, release the absolute desktop lock and preserve the site's
   normal compact responsive header. */
@media (max-width:880px){

  html body header.site > .wrap.bar,
  html body .msw-header > .msw-shell-wrap.msw-head{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

  html body header.site > .wrap.bar > .brand,
  html body .msw-header > .msw-shell-wrap.msw-head > .msw-logo-brand,
  html body header.site > .wrap.bar > #public-main-nav,
  html body .msw-header > .msw-shell-wrap.msw-head > .msw-nav{
    position:static !important;
    transform:none !important;
  }
}

/* ============================================================ */