:root {
  --alpinechain-green: #65c94f;
  --alpinechain-green-dark: #357d28;
}

.bio-column { margin-top: clamp(2rem, 8vh, 5rem); }
.logo-lockup { display: block; margin: 0 auto 1.5rem; }
.logo-lockup img { display: block; width: min(100%, 26rem); height: auto; margin: 0 auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.tagline { max-width: 34rem; margin: 0 auto 1.5rem; }
.tagline span { display: block; }
.tagline span:first-child { color: #f7931a; font-weight: 800; }
.tagline .bitcoin-symbol { display: inline; font-size: 1.18em; line-height: 1; }
.button.button-alpinechain {
  --button-text: #ffffff;
  --button-border: 1px solid #ffffff;
  background: linear-gradient(135deg, #1d1d39, #010020);
}
.qr-mode-toggle {
  display: inline-flex; align-items: center; gap: 0.75rem; margin: 0 auto 1.25rem;
  font-size: 1rem; font-weight: 700; cursor: pointer; user-select: none;
}
.qr-mode-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-track {
  position: relative; width: 3.25rem; height: 1.75rem; flex: 0 0 auto;
  background: #6f6f6f; border-radius: 999px; transition: background-color 150ms ease;
}
.switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
  transition: transform 150ms ease;
}
.qr-mode-toggle input:checked + .switch-track { background: var(--alpinechain-green-dark); }
.qr-mode-toggle input:checked + .switch-track::after { transform: translateX(24px); }
.qr-mode-toggle input:focus-visible + .switch-track { outline: 3px solid var(--alpinechain-green); outline-offset: 3px; }
.qr-mode-help, .qr-label, .qr-code { display: none; }
.link-with-qr { position: relative; width: 18.75rem; margin: 0 auto 1rem; }
.link-with-qr .button { margin-bottom: 0; }
.qr-mode .qr-mode-help { display: block; max-width: 26rem; margin: 0 auto 1.25rem; font-size: 0.95rem; }
.qr-mode .platform-links {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem;
  max-width: 34rem; margin: 0 auto;
}
.qr-mode .link-with-qr {
  display: flex; width: 100%; margin: 0; align-items: center;
  flex-direction: column; gap: 0.75rem;
}
.qr-mode .link-with-qr .qr-code {
  position: static; display: block; width: min(100%, 220px); height: auto; box-sizing: border-box;
  padding: 8px; background: #fff; border-radius: 10px; box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
  opacity: 1; visibility: visible; transform: none;
}

@media (min-width: 700px) {
  .qr-code {
    position: absolute; top: 50%; left: calc(100% + 1rem); display: block;
    width: 112px; height: 112px; padding: 8px; background: #fff; border-radius: 10px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 20%); opacity: 0; visibility: hidden;
    transform: translateY(-50%) scale(0.92);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
    pointer-events: none; z-index: 10;
  }
  .link-with-qr:hover .qr-code, .link-with-qr:focus-within .qr-code {
    opacity: 1; visibility: visible; transform: translateY(-50%) scale(1);
  }
  .qr-mode .link-with-qr { flex-direction: row; justify-content: center; gap: 1rem; }
  .qr-mode .link-with-qr .qr-code {
    position: static; width: 132px; height: 132px; opacity: 1;
    visibility: visible; transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qr-code, .switch-track, .switch-track::after { transition: none; }
}