/* Utility classes standing in for the former inline style="" attributes.
   Server CSP no longer allows 'unsafe-inline' for styles, so all former
   attribute styling lives here and in css/<page>.css.

   Precedence notes:
   - Non-display utilities use !important because the inline attribute they
     replace always beat every stylesheet rule; !important preserves that.
   - Display utilities (.u-hidden/.df/.fww/.fwn/.aic) do NOT use !important so
     scripts that toggle visibility via el.style.display keep working
     (inline declarations override plain stylesheet declarations). */

/* display / flex (no !important — see note above) */
.u-hidden{display:none}
.df{display:flex}
.fww{flex-wrap:wrap}
.fwn{flex-wrap:nowrap}
.aic{align-items:center}
.jc-c{justify-content:center!important}

/* spacing */
.mt4{margin-top:4px!important}
.mt8{margin-top:8px!important}
.mt10{margin-top:10px!important}
.mt12{margin-top:12px!important}
.mt14{margin-top:14px!important}
.mt16{margin-top:16px!important}
.mt18{margin-top:18px!important}
.mt20{margin-top:20px!important}
.mt24{margin-top:24px!important}
.mt26{margin-top:26px!important}
.mt40{margin-top:40px!important}
.mb4{margin-bottom:4px!important}
.mb10{margin-bottom:10px!important}
.mb12{margin-bottom:12px!important}
.mb14{margin-bottom:14px!important}
/* shorthand shims for former margin/… attribute values */
.m0-0-10{margin:0 0 10px!important}
.m6-0-0{margin:6px 0 0!important}
.m6-0-2{margin:6px 0 2px!important}
.m6-0-4{margin:6px 0 4px!important}
.m8-0-2{margin:8px 0 2px!important}
.m18-0{margin:18px 0!important}
.m22-0-0{margin:22px 0 0!important}
.m0-auto{margin:0 auto!important}
.p26{padding:26px!important}
.pt56{padding-top:56px!important}
.pl18{padding-left:18px!important}

/* sizing */
.w70{width:70px!important}
.w90{width:90px!important}
.w210{width:210px!important}
.mw260{max-width:260px!important}
.flex1{flex:1!important}
.minw200{min-width:200px!important}
.minw220{min-width:220px!important}

/* typography */
.tdn{text-decoration:none!important}
.ta-l{text-align:left!important}
.ta-c{text-align:center!important}
.fw400{font-weight:400!important}
.fw600{font-weight:600!important}
.fw700{font-weight:700!important}
.fs11{font-size:11px!important}
.fs125{font-size:12.5px!important}
.fs13{font-size:13px!important}
.fs135{font-size:13.5px!important}
.fs145{font-size:14.5px!important}
.fs15{font-size:15px!important}
.fs165{font-size:16.5px!important}
.fs30{font-size:30px!important}
.fs64{font-size:64px!important}
.ls04{letter-spacing:.04em!important}
.ls08{letter-spacing:.08em!important}
.ls1{letter-spacing:.1em!important}

/* colours (theme-independent hexes used across pages) */
.c-mut{color:var(--mut)!important}
.c-navy{color:var(--navy)!important}
.c-inherit{color:inherit!important}
.c-blue{color:#2563EB!important}
.c-slate{color:#94A3B8!important}
.c-s500{color:#64748B!important}

/* shared section band + small CTAs */
.band{background:#fff;border-top:1px solid var(--line)!important}
.band.bb{border-bottom:1px solid var(--line)!important}
.btn-slab{display:inline-block;background:var(--navy);color:#fff;font-weight:700;padding:13px 26px;border-radius:11px;text-decoration:none}

/* flex gap shims (pairs with .df) */
.fgap10{gap:10px!important}
.fgap14{gap:14px!important}
.fgap16{gap:16px!important}
.gap6{gap:6px!important}

/* misc single-property shims */
.va-2{vertical-align:-2px!important}
.mr6{margin-right:6px!important}
.cp-nosel{cursor:pointer!important;user-select:none!important}