/* About-page chrome CSS carried over verbatim from design/About.dc.html's
 * <helmet><style> block. Drives the "Trusted across seven countries" flag row:
 * each flag is an .instip that reveals an .insmodal popup on hover / focus-within
 * (pure CSS, no JS). `.tm` + `.flagtip` + grid min-width:0 are already global
 * (footer.css / home.css); only the .ins* classes are new here.
 * Imported globally via app/globals.css.
 */
.instip {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  cursor: default;
}
.insmodal {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.96);
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(13, 63, 112, 0.26);
  padding: 14px 20px;
  min-width: 158px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 20;
}
.insmodal::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fff;
}
.instip:hover .insmodal,
.instip:focus-within .insmodal {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}
.insnum {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: var(--at-blue);
  line-height: 1;
}
.inslbl {
  display: block;
  font-size: 12.5px;
  color: var(--gray-500);
  margin-top: 6px;
  line-height: 1.35;
}
.insflag {
  border-radius: 3px;
  display: block;
  box-shadow: 0 3px 10px rgba(13, 63, 112, 0.22);
}
.insname {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-600);
}