:root {
  --site-content-max: 2200px;
  --site-anchor-offset: 80px;
  --site-gutter: clamp(24px, 5vw, 96px);
  --site-content-width: min(
    var(--site-content-max),
    calc(100% - var(--site-gutter) - var(--site-gutter))
  );
  --site-reading-max: 1680px;
}

.wrap {
  width: var(--site-content-width);
  max-width: var(--site-content-max);
  margin-inline: auto;
  padding-inline: 0;
}

.apply,
.apply > *,
.apply label,
.apply input,
.apply select,
.apply fieldset {
  min-width: 0;
}

.apply input,
.apply select {
  width: 100%;
  max-width: 100%;
}

.apply .choice-toggle > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.plan .tag {
  flex-wrap: wrap;
  row-gap: 8px;
}

.plan .tag > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.plan .badge {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.legal-copy {
  width: var(--site-content-width);
  max-width: var(--site-reading-max);
  margin-inline: auto;
  column-count: 2;
  column-gap: clamp(36px, 5vw, 80px);
}

.legal-copy > h1,
.legal-copy > .upd {
  column-span: all;
}

.legal-copy h2 {
  break-after: avoid-column;
  break-inside: avoid-column;
}

.legal-copy p,
.legal-copy ul {
  orphans: 3;
  widows: 3;
}

.legal-copy table {
  column-span: all;
  max-width: 100%;
  table-layout: fixed;
}

@media (max-width: 980px) {
  .legal-copy {
    max-width: 860px;
    column-count: 1;
  }
}

@media (max-width: 620px) {
  :root {
    --site-gutter: 22px;
    --site-anchor-offset: 126px;
  }

  body:not(.legal-page) .nav {
    display: flex;
    height: auto;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-block: 10px;
  }

  body:not(.legal-page) .nav nav {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  body:not(.legal-page) .nav nav a.btn {
    max-width: calc(100% - 52px);
    padding: 12px 14px;
    font-size: 15px;
    white-space: nowrap;
  }

  body:not(.legal-page) .menu-t {
    flex: 0 0 44px;
  }

  body:not(.legal-page) section[id] {
    scroll-margin-top: var(--site-anchor-offset);
  }

  body.legal-page .nav {
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding-block: 8px;
  }

  body.legal-page .brand,
  body.legal-page .back {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 360px) {
  :root {
    --site-gutter: 18px;
  }

  body:not(.legal-page) .brand {
    font-size: 22px;
  }
}
