:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  color: #243047;
  background: #f5f7fb;
}

body { margin: 0; }
.site-header {
  align-items: center;
  background: #243b64;
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 1rem 5%;
}
.site-header a { color: white; text-decoration: none; }
.brand { font-size: 1.2rem; font-weight: 700; }
nav { align-items: center; display: flex; gap: 1rem; }
.container { margin: 0 auto; max-width: 1050px; padding: 3rem 5%; }
.hero { padding: 5rem 0; }
.eyebrow { color: #c27a2c; font-weight: 700; text-transform: uppercase; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin: .25rem 0 1rem; }
.button, button { background: #c27a2c; border: 0; border-radius: .35rem; color: white; cursor: pointer; display: inline-block; font: inherit; padding: .7rem 1rem; text-decoration: none; }
.card { background: white; border-radius: .5rem; box-shadow: 0 2px 12px #24304714; padding: 1.5rem; }
.narrow { margin: 0 auto; max-width: 420px; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
label { display: block; font-weight: 600; margin: 1rem 0 .35rem; }
input { border: 1px solid #cbd3e1; border-radius: .35rem; box-sizing: border-box; font: inherit; padding: .7rem; width: 100%; }
form button { margin-top: 1.25rem; }
.touch-action { min-height: 48px; }
.table-scroll { -webkit-overflow-scrolling: touch; }
@media (max-width: 767.98px) {
  .table-scroll { overflow-x: auto; }
  .table-scroll table { min-width: 980px; }
}
.inline-form { display: inline; }
.inline-form button { background: transparent; padding: 0; }
.flash { background: #e8f3e8; border-radius: .35rem; margin-bottom: 1rem; padding: .75rem; }
.flash.error { background: #fde8e8; }