/* Supporting pages inherit the landing page font and brand tokens. */
.support-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bk-paper);
  color: var(--bk-ink);
}
.support-header,
.support-footer {
  width: min(100% - var(--sp-600), 1200px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-300);
  padding-block: var(--sp-400);
}
.support-header a,
.support-footer a {
  color: var(--bk-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--sp-50);
}
.support-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-75);
  font-size: var(--fs-xl);
  font-weight: 600;
  text-decoration: none;
}
.support-header nav,
.support-footer nav {
  display: flex;
  gap: var(--sp-300);
  font-size: var(--fs-sm);
}
.support-main {
  width: min(100% - var(--sp-600), 680px);
  margin-inline: auto;
  padding-block: var(--sp-700) var(--sp-900);
  flex: 1;
}
.support-main h1 {
  margin: 0 0 var(--sp-400);
  font-size: var(--fs-5xl);
  line-height: 1;
  font-weight: 600;
  text-wrap: balance;
}
.support-eyebrow {
  color: var(--bk-ink-soft);
  font-size: var(--fs-sm);
  margin: 0 0 var(--sp-200);
}
.support-main h2 {
  margin: var(--sp-500) 0 var(--sp-200);
  font-size: var(--fs-2xl);
  line-height: var(--lh-2xl);
  font-weight: 600;
  text-wrap: balance;
}
.support-main p {
  margin-block: 0 var(--sp-300);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  text-wrap: pretty;
}
.support-main .support-lead {
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
}
.support-main a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: var(--sp-50);
}
.support-main a:hover,
.support-header a:hover,
.support-footer a:hover {
  text-decoration-thickness: 2px;
}
.support-page a:active {
  opacity: 0.8;
}
.support-page a:focus-visible {
  outline: 2px solid var(--bk-ink);
  outline-offset: var(--sp-50);
  border-radius: var(--radius-sm);
}
.support-footer [aria-current="page"] {
  font-weight: 600;
  text-decoration: none;
}
.support-skip {
  position: fixed;
  left: var(--sp-300);
  top: var(--sp-300);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--bk-ink);
  color: var(--bk-paper);
  padding: var(--sp-75) var(--sp-100);
  border-radius: var(--radius-sm);
}
.support-skip:focus {
  transform: translateY(0);
}
@media (max-width: 480px) {
  .support-header,
  .support-footer,
  .support-main {
    width: calc(100% - var(--sp-400));
  }
  .support-main {
    padding-block: var(--sp-600) var(--sp-700);
  }
  .support-main h1 {
    font-size: var(--fs-4xl);
    line-height: var(--lh-4xl);
  }
}