/* Money4All — landing page
   Base styles, responsive rules and interaction states.
   Layout is authored as inline styles on the elements themselves. */

body { margin:0; background:#ffffff; font-family:"DM Sans",system-ui,sans-serif; color:#10151a; -webkit-font-smoothing:antialiased; }
  a { color:#1f7d88; text-decoration:none; }
  a:hover { color:#36B1BF; }
  [data-mask] { display:block; }
  [data-mask] > span { display:block; will-change:transform; }
  .pre-anim [data-mask] > span { opacity:0; }
  .pre-anim [data-fade] { opacity:0; }
  details > summary { list-style:none; cursor:pointer; }
  details > summary::-webkit-details-marker { display:none; }
  details[open] .m4-chev { transform:rotate(180deg); }
  .m4-scroll::-webkit-scrollbar { height:0; display:none; }
  .m4-scroll { scrollbar-width:none; -ms-overflow-style:none; }
  
  @keyframes m4-marquee { from { transform:translateX(0) } to { transform:translateX(-50%) } }
  #m4-mob { display:none !important; }
  #m4-mob[open] .m4-burger-open { display:none !important; }
  #m4-mob .m4-burger-close { display:none !important; }
  #m4-mob[open] .m4-burger-close { display:inline-flex !important; }
  @media (max-width: 1150px) {
    #m4-navlinks, #m4-navactions { display:none !important; }
    #m4-mob { display:block !important; }
  }
  @media (max-width: 900px) {
    [data-screen-label="Hero"] { display:flex !important; flex-direction:column !important; padding-bottom:0 !important; }
    [data-screen-label="Hero"] > div:first-of-type { order:1; }
    #m4-heroimg { order:2; position:static !important; inset:auto !important; height:auto !important; width:100% !important; max-width:340px !important; margin:24px auto 0 !important; }
    #m4-herospacer, #m4-herofloats { display:none !important; }
  }
  @media (max-width: 760px) {
    [data-anim], [data-anim] > div, [data-anim] > div > div { text-align:center !important; }
    [data-anim] h1, [data-anim] h2, [data-anim] h3, [data-anim] p { text-align:center !important; }
    [data-anim] p[data-fade] { margin-left:auto !important; margin-right:auto !important; }
    [data-anim] [data-eyebrow] { justify-content:center !important; }
    [data-anim] [data-eyebrow-pill] { margin-left:auto !important; margin-right:auto !important; }
    [data-anim] a[target="_blank"] { display:inline-flex !important; }
    [data-anim] details { text-align:left !important; }
    [data-anim] details summary, [data-anim] details p { text-align:left !important; }
    [data-anim] [data-carousel] { text-align:left !important; }
    [data-anim] [data-carousel] h3, [data-anim] [data-carousel] p { text-align:left !important; }
    [data-anim] [data-carousel] + div { justify-content:center !important; }
  }
  .m4-track { display:flex; align-items:center; width:max-content; animation:m4-marquee 34s linear infinite; }
  .m4-track > * { margin-right:40px; flex:none; }

/* ---- Interaction states (hover / active / focus) ---- */

.h1:hover { color:#1f7d88 !important; }
.h2:hover { color:#1f7d88 !important; }
.h3:hover { color:#1f7d88 !important; }
.h4:hover { color:#1f7d88 !important; }
.h5:hover { color:#1f7d88 !important; }
.h6:hover { border-color:#36B1BF !important; color:#1f7d88 !important; }
.h7:hover { background:#10151a !important; color:#ffffff !important; }
.h8:active { transform:scale(.98) !important; }
.h9:hover { background:#1f7d88 !important; }
.h10:active { transform:scale(.98) !important; }
.h11:hover { background:#10151a !important; color:#ffffff !important; }
.h12:active { transform:scale(.98) !important; }
.h13:hover { background:#10151a !important; color:#ffffff !important; }
.h14:active { transform:scale(.98) !important; }
.h15:hover { border-color:#36B1BF !important; background:#F2FAFB !important; }
.h16:hover { border-color:#36B1BF !important; background:#F2FAFB !important; }
.h17:hover { border-color:#36B1BF !important; color:#1f7d88 !important; }
.h18:hover { background:#ffffff !important; color:#10151a !important; }
.h19:active { transform:scale(.98) !important; }
.h20:hover { color:#36B1BF !important; }
.h21:hover { color:#36B1BF !important; }
.h22:hover { color:#36B1BF !important; }
.h23:hover { color:#36B1BF !important; }
.h24:hover { color:#36B1BF !important; }
.h25:hover { color:#36B1BF !important; }
.h26:hover { border-color:#36B1BF !important; color:#36B1BF !important; }
.h27:hover { border-color:#36B1BF !important; color:#36B1BF !important; }
.h28:hover { border-color:#36B1BF !important; color:#36B1BF !important; }