.site-footer {
  background: var(--panel);
  box-shadow: none;
  backdrop-filter: none;
}

@media (max-width: 620px) {
  :root {
    --site-footer-height: 54px;
  }

  html,
  body {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.legal-modal-open {
    overflow: hidden;
  }

  .app-shell {
    height: calc(100dvh - var(--market-tape-height));
    min-height: calc(100dvh - var(--market-tape-height));
  }

  .app-layout[data-active-page="calculator"] {
    transform: translateY(clamp(46px, 7.8dvh, 74px));
  }

  .site-footer {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    height: var(--site-footer-height);
    padding: 2px 8px;
  }

  .site-footer-card {
    display: grid;
    grid-template-areas:
      "rights"
      "links"
      "feedback";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, auto);
    align-items: center;
    align-content: center;
    justify-content: center;
    column-gap: 0;
    row-gap: 2px;
    color: color-mix(in srgb, var(--ink) 72%, var(--muted));
    font-size: clamp(7.5px, 2.15vw, 9px);
    font-weight: 700;
    line-height: 1;
  }

  .site-footer-main {
    display: contents;
  }

  .site-footer-links,
  .site-footer-rights,
  .site-footer-feedback {
    font-size: inherit;
    line-height: inherit;
  }

  .site-footer-links,
  .site-footer-feedback {
    gap: 3px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .site-footer-links button,
  .site-footer-feedback button {
    margin-block: -4px;
    padding-block: 4px;
  }

  .site-footer-links {
    grid-area: links;
    justify-self: center;
  }

  .site-footer-feedback {
    grid-area: feedback;
    grid-column: auto;
    justify-content: center;
    width: auto;
    color: color-mix(in srgb, var(--muted) 78%, var(--panel));
    font-size: clamp(7px, 1.95vw, 8.4px);
    justify-self: center;
  }

  .site-footer-rights {
    grid-area: rights;
    justify-self: center;
    white-space: nowrap;
  }
}