/* v3.5.8.2 — Content & UI Hotfix Preview */

/* Alerts: two equal cards per row on desktop; one column on small screens. */
.alerts-list{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.alert-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
}
.alert-card h2{font-size:clamp(1.35rem,2.1vw,1.85rem)}
.alert-card>p{flex:1}

/* Case studies: 3 desktop / 2 tablet / 1 mobile. */
.case-list.case-list-six{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Make the four “before you…” cards visually identical in height and rhythm. */
.habit-grid{align-items:stretch}
.habit-grid>.action-card{
  display:flex;
  flex-direction:column;
  min-height:230px;
  height:100%;
}
.habit-grid>.action-card .icon-box{flex:0 0 46px}
.habit-grid>.action-card h3{margin-top:0}
.habit-grid>.action-card p{flex:1;margin-bottom:0}
.dirham-symbol-box svg{
  width:38px;
  height:38px;
  display:block;
  color:#ff3344;
  overflow:visible;
}
.dirham-symbol-box svg path,
.dirham-symbol-box svg line{vector-effect:non-scaling-stroke}

/* New toll/fine visual. */
.hero-figure img[src*="toll-traffic-fine-sms-v3582"],
.card-media img[src*="toll-traffic-fine-sms-v3582"]{
  object-fit:cover;
  object-position:center;
}

@media (max-width:980px){
  .case-list.case-list-six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .habit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .alerts-list{grid-template-columns:1fr}
}
@media (max-width:640px){
  .case-list.case-list-six,
  .habit-grid{grid-template-columns:1fr}
  .habit-grid>.action-card{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .alert-card,.habit-grid>.action-card{transition:none!important}
}