/* Equal outside columns keep legal information at the page's true center. */
.r4 {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 16px 26px;
  height: auto;
  min-height: 0;
  background: var(--bg);
  border: 0;
}
.r4 .f-brand {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.r4 .f-brand .logo { flex-shrink: 0; }
.r4 .f-brand .sitname { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.r4 .f-legal {
  grid-column: 2;
  min-width: 0;
  padding: 0;
  border: 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.r4 .f-contact {
  grid-column: 3;
  min-width: 0;
  padding: 0;
  border: 0;
  text-align: right;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.r4 .f-legal a, .r4 .f-contact a { max-width: 100%; color: var(--sky-deep); text-decoration: none; overflow-wrap: anywhere; }
.r4 .f-legal a:hover, .r4 .f-contact a:hover { text-decoration: underline; }
@media (min-width: 769px) and (max-width: 1024px) {
  .r4 { gap: 16px; padding: 14px 20px; }
  .r4 .f-brand { gap: 10px; }
}
@media (max-width: 768px) {
  .r4 {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 16px 18px 18px;
  }
  .r4 .f-brand, .r4 .f-legal, .r4 .f-contact { grid-column: 1; width: 100%; text-align: center; }
  .r4 .f-brand { justify-content: center; gap: 12px; }
  .r4 .f-legal, .r4 .f-contact { padding: 0; border: 0; font-size: 12px; }
  .r4 .f-contact { margin-left: 0; }
  .r4 .logo { width: 38px; height: 38px; font-size: 16px; }
  .r4 .sitname { font-size: 16px; }
}