.card[data-bg="leak"]{ --card-bg:url(img/card-leak.webp) }
.card[data-bg="no-hot-water"]{ --card-bg:url(img/card-no-hot-water.webp) }
.card[data-bg="clog"]{ --card-bg:url(img/card-clog.webp) }
.card[data-bg="sewer"]{ --card-bg:url(img/card-sewer.webp) }
.card[data-bg="water-heater"]{ --card-bg:url(img/card-water-heater.webp) }
.card[data-bg="other"]{ --card-bg:url(img/card-other.webp) }
:root{ --display:'Instrument Serif', 'Times New Roman', serif; --serif:'Inter Tight', 'Helvetica Neue', Arial, sans-serif; --sans:'Inter Tight', 'Helvetica Neue', Arial, sans-serif; --htt:none; --hw:400; --hls:-0.025em; --em-style:italic; --hero-em:#A2D6F9; --sh-a:#DCEFFD; --sh-b:#FFFFFF; --face-2:#0520A0; }
:root{ --paper:#FFFFFF; --card:#FFFFFF; --ink:#072AC8; --ink-2:#3B4A80; --rule:#D3E8F8; --accent:#072AC8; --on-accent:#FFFFFF; --accent-text:#072AC8; --star:#072AC8; --stamp:#072AC8; --dot:rgba(7,42,200,.2); --paper-soft:#A2D6F9; --ok:#1F6B45; --paper-2:#EEF7FE; --accent-hover:#0520A0; --accent-soft:#E6F4FE; --dk-accent:#A2D6F9; --dk-hover:#FFFFFF; --dk-on:#072AC8; --dk-text:#A2D6F9; color-scheme:light }