/* Staging site-v1 layout. Values come from undertones-tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-height: 100dvh; display: flex; flex-direction: column; }
.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--ut-paper); color: var(--ut-ink); padding: var(--ut-space-2) var(--ut-space-4);
}
.skip:focus { left: var(--ut-space-4); top: var(--ut-space-4); z-index: 10; outline: var(--ut-focus); }
.frame { width: 100%; max-width: var(--ut-page-max); margin: 0 auto; padding: 0 var(--ut-space-4); }
.site-header { padding: var(--ut-space-8) 0 var(--ut-space-6); }
.site-header__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ut-space-4); }
.site-header__brand { display: inline-block; text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--ut-space-2) var(--ut-space-4); }
.site-nav a {
  min-height: var(--ut-tap-min); display: inline-flex; align-items: center;
  font-size: var(--ut-text-sm); font-weight: var(--ut-weight-label);
  letter-spacing: var(--ut-tracking-label); color: var(--ut-ink); text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
main { flex: 1; padding: var(--ut-space-12) 0 var(--ut-space-16); }
.hero, .prose { max-width: var(--ut-measure); }
.hero h1, .prose h1 { margin-bottom: var(--ut-space-6); }
.lead { font-size: var(--ut-text-lg); margin-bottom: var(--ut-space-6); }
.prose h2 {
  margin: var(--ut-space-10) 0 var(--ut-space-3);
  font-size: var(--ut-text-md); font-weight: var(--ut-weight-label);
  letter-spacing: var(--ut-tracking-label); line-height: var(--ut-leading-text);
}
.prose p, .prose li { margin: 0 0 var(--ut-space-4); }
.prose ul { padding-left: 1.2em; margin: 0 0 var(--ut-space-4); }
.how { margin-top: var(--ut-space-16); display: grid; gap: var(--ut-space-8); }
.how h2 {
  font-weight: var(--ut-weight-label); font-size: var(--ut-text-md);
  letter-spacing: var(--ut-tracking-label); line-height: var(--ut-leading-text);
  margin-bottom: var(--ut-space-2);
}
.how h2 a { color: inherit; text-decoration: none; }
.how h2 a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.how p { color: var(--ut-quiet); margin: 0; }
.register { margin-top: var(--ut-space-16); max-width: 36rem; }
.register h2 { margin-bottom: var(--ut-space-4); }
.register .intro { margin-bottom: var(--ut-space-8); }
.pair { display: grid; gap: 0 var(--ut-space-4); }
.ut-input, .ut-textarea {
  width: 100%; font: inherit; color: var(--ut-ink); background: var(--ut-paper);
  border: var(--ut-border); border-radius: var(--ut-radius); min-height: var(--ut-tap-min);
  padding: 0 var(--ut-space-3);
}
.ut-textarea { min-height: calc(var(--ut-tap-min) * 2); padding: var(--ut-space-3); }
.ut-field[data-invalid="true"] .ut-input,
.ut-field[data-invalid="true"] .ut-textarea { border: 2px solid var(--ut-walnut); }
.actions { margin-top: var(--ut-space-6); display: grid; gap: var(--ut-space-3); }
.secondary { margin-top: var(--ut-space-10); max-width: var(--ut-measure); }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.status-msg { margin-top: var(--ut-space-4); }
.site-footer { margin-top: auto; }
.site-footer .frame { padding-top: var(--ut-space-8); padding-bottom: var(--ut-space-8); display: grid; gap: var(--ut-space-4); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--ut-space-3) var(--ut-space-6); }
.site-footer nav a { color: var(--ut-ivory); font-size: var(--ut-text-sm); text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.site-footer p { color: var(--ut-ivory); font-size: var(--ut-text-sm); margin: 0; }
@media (min-width: 640px) {
  .pair { grid-template-columns: 1fr 1fr; }
  .how { grid-template-columns: repeat(3, 1fr); gap: var(--ut-space-8); }
}
@media (min-width: 900px) {
  .site-header { padding: var(--ut-space-12) 0 var(--ut-space-8); }
  main { padding: var(--ut-space-16) 0 var(--ut-space-24); }
}