/* Site styles. Colours, type and spacing come from tokens.css (copied from the app). */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--ab-font-sans); font-synthesis: none; color: var(--ab-text); background: var(--ab-shell); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-size: 1rem; line-height: 1.5; }
a { color: var(--ab-bridge); }
:focus-visible { outline: 2px solid var(--ab-bridge); outline-offset: 2px; }

.skip { position: absolute; left: var(--ab-space-4); top: -100px; padding: var(--ab-space-3) var(--ab-space-4); background: var(--ab-card); border-radius: var(--ab-radius-control); z-index: 1; }
.skip:focus { top: var(--ab-space-2); }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ab-space-2); padding: 0 var(--ab-space-4); border-bottom: 1px solid var(--ab-stroke); }
.site-header .brand { display: inline-flex; align-items: center; gap: var(--ab-space-2); min-height: 44px; font-family: system-ui, "Segoe UI Variable Text", "Segoe UI", sans-serif; font-weight: 600; color: var(--ab-text); text-decoration: none; }
.site-header .mark-24 { width: 24px; height: 24px; color: var(--ab-bridge); }
.site-header nav { display: flex; flex-wrap: nowrap; gap: 0; }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--ab-space-2); color: var(--ab-text); text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }

main { flex: 1; width: 100%; max-width: 40rem; margin: 0 auto; padding: var(--ab-space-8) var(--ab-space-4) var(--ab-space-12); }
main.prose { max-width: 72ch; }
h1, h2 { line-height: 1.2; }

.lockup { display: flex; align-items: center; gap: 17px; margin: 0 0 var(--ab-space-5); }
.lockup .mark-lockup { width: 56px; height: 56px; color: var(--ab-bridge); flex: none; }
.wordmark { font-family: "Slipgates Sans", system-ui, sans-serif; font-weight: 600; font-size: 2.4rem; letter-spacing: var(--ab-tracking-wordmark); color: var(--ab-text); }
.intro { font-size: 1.125rem; margin: 0 0 var(--ab-space-4); }
.label { display: inline-block; padding: 2px var(--ab-space-2); border: 1px solid var(--ab-stroke2); border-radius: var(--ab-radius-pill); font-size: 0.8125rem; color: var(--ab-text2); }

.download { margin-top: var(--ab-space-6); }
.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 var(--ab-space-6); background: var(--ab-bridge); color: var(--ab-bridge-on); border-radius: var(--ab-radius-control); font-weight: 600; text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
.btn:focus-visible { outline-color: var(--ab-text); }
.alt, .meta { margin: var(--ab-space-2) 0 0; font-size: 0.875rem; color: var(--ab-text2); }
.alt a, .meta a { display: inline-block; padding: var(--ab-space-3) 0; }
.meta[hidden] { display: none; }
.checksum p, .checksum ul { margin: 0; }
.checksum ul { padding-left: var(--ab-space-4); }
.checksum code { font-family: var(--ab-font-mono); overflow-wrap: anywhere; }
.steps p a { display: inline-block; padding: var(--ab-space-3) 0; }
@media (min-width: 480px) { .btn { width: auto; min-width: 20rem; } }

.steps { margin-top: var(--ab-space-12); }
.steps ol { padding-left: var(--ab-space-6); }
.steps li { margin-bottom: var(--ab-space-3); }

.site-footer { display: flex; flex-wrap: wrap; gap: var(--ab-space-2) var(--ab-space-4); align-items: center; padding: var(--ab-space-4); border-top: 1px solid var(--ab-stroke); font-size: 0.875rem; color: var(--ab-text2); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ab-text2); }

@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; forced-color-adjust: none; }
  .label { border-color: CanvasText; }
}