/* ===== Legal strip: rating badges + small print ===== */
.legal{background:var(--white)}
.legal__inner{padding:64px var(--section-pad) 40px}

.legal__badges{
  display:flex;align-items:center;gap:16px;
  font-size:14px;line-height:26px;color:var(--navy);
}
/* The two rating badges are one button: tapping them opens the model spec sheet. */
.legal__ratings{
  display:flex;align-items:center;gap:16px;
  font:inherit;color:inherit;cursor:pointer;
}
.legal__group{display:flex;align-items:center;gap:6px}
.legal__ratings:hover .legal__group > span:first-child{text-decoration:underline}
.legal__badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;padding:0 6px;border-radius:4px;
  color:var(--white);font-size:14px;line-height:26px;font-weight:700;
}
.legal__badge--pollution{background:var(--pollution)}
.legal__badge--safety{background:var(--safety)}
.legal__details{white-space:nowrap}

.legal__lines{margin-top:28px}
.legal__lines p{font-size:12px;line-height:20.5px;font-weight:400;color:var(--muted)}

/* ===== Spec-sheet popup ===== */
.spec-modal{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;
  padding:56px 16px 24px;background:rgba(2,11,36,.72);
}
.spec-modal.is-open{display:flex}
.spec-modal__dialog{position:relative;max-width:100%}
/* Both dimensions stay auto: the moment a width is pinned and max-height clamps,
   Chrome squashes the sheet instead of rescaling it (seen at 1366×768). With
   only max-* constraints the aspect ratio is always preserved. */
.spec-modal__img{
  display:block;width:auto;height:auto;
  max-width:min(100%,560px);max-height:calc(100vh - 96px);
  border-radius:8px;background:var(--white);
}
.spec-modal__close{
  position:absolute;top:-44px;left:0;
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--white);color:var(--navy);
  font-size:24px;line-height:1;cursor:pointer;
}

@media (max-width:1024px){
  .legal__inner{padding:32px 16px 112px}
  .legal__badges{flex-wrap:wrap;gap:10px}
  .legal__ratings{gap:10px}
  .legal__lines{margin-top:16px}
  .legal__lines p{font-size:11px;line-height:17px}
}