/* Sworncard landing — light theme, one accent, system fonts, no external resources. */

:root {
  --ink: #14181f;
  --ink-muted: #4a5560;
  --paper: #ffffff;
  --paper-alt: #f5f7fa;
  --line: #d7dde5;
  --accent: #14477e;
  --accent-strong: #0e3660;
  --danger: #97161c;
  --ok: #1c5c38;
  --radius: 6px;
  --measure: 68ch;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3 { line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.075rem; }
p { margin: 0 0 1rem; max-width: var(--measure); }
ul, ol { max-width: var(--measure); }

a { color: var(--accent); }
a:hover { color: var(--accent-strong); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.wrap { width: 100%; max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }
.wrap--narrow { max-width: 40rem; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  color: var(--accent);
  padding: 0.6rem 1rem;
  z-index: 10;
}
.skip-link:focus { left: 0; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.brand { font-weight: 650; letter-spacing: -0.015em; font-size: 1.1rem; }
.site-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.94rem; }
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }

/* Hero */
.hero { padding: 3.5rem 0 2.75rem; }
.status-pill {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-alt);
  color: var(--ink-muted);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lede { font-size: 1.125rem; color: var(--ink-muted); max-width: 58ch; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; max-width: none; margin-top: 1.5rem; }
.cta-note { color: var(--ink-muted); font-size: 0.92rem; }

/* Sections */
.section { padding: 2.75rem 0; border-top: 1px solid var(--line); }
.section--alt { background: var(--paper-alt); }
.section--waitlist { background: var(--paper-alt); }
.section-lede { color: var(--ink-muted); }

/* Ladder */
.ladder {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.ladder__step {
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 1rem 1.1rem;
}
.ladder__step h3 { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; }
.ladder__step p { margin: 0; color: var(--ink-muted); font-size: 0.95rem; }

.tag {
  display: inline-block;
  border-radius: 3px;
  padding: 0.05rem 0.4rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 0.12em;
}
.tag--planned { background: #e6ecf4; color: var(--accent-strong); border: 1px solid #c6d4e4; }

/* Diagram */
.diagram { margin: 2.25rem 0 0; }
.diagram img { display: block; width: 100%; height: auto; max-width: 60rem; }
.diagram figcaption { color: var(--ink-muted); font-size: 0.9rem; margin-top: 0.5rem; }

/* Facts / compliance */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.facts li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  max-width: var(--measure);
}
.disclaimer { margin-top: 1.25rem; color: var(--ink-muted); font-style: italic; }

.statement { font-size: 1.075rem; }
.links { padding-left: 1.15rem; }
.links li { margin-bottom: 0.35rem; }

/* Roadmap */
.roadmap { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.roadmap li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.05rem;
  max-width: var(--measure);
}
.roadmap .tag { margin-right: 0.5rem; }

.bridge p { font-size: 1.05rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.62rem 1.1rem;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-strong); color: #fff; }
.btn--secondary { background: var(--paper); color: var(--accent); border-color: var(--line); }
.btn--secondary:hover { border-color: var(--accent); color: var(--accent-strong); }
.btn--submit { width: 100%; margin-top: 0.5rem; }
.btn[disabled] { opacity: 0.62; cursor: default; }

.spinner {
  width: 0.95em;
  height: 0.95em;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 3s; }
}

/* Form */
.waitlist-form { margin-top: 1.25rem; }
.field { margin-bottom: 1.1rem; }
.field__label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.field__input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid #9aa5b1;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.field__input[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
.field__hint { color: var(--ink-muted); font-size: 0.88rem; margin: 0.3rem 0 0; }
.field__error { color: var(--danger); font-size: 0.9rem; font-weight: 600; margin: 0.35rem 0 0; }
.field__error:empty { display: none; }

.check { display: flex; align-items: flex-start; gap: 0.6rem; }
.check input { margin: 0.32rem 0 0; width: 1.05rem; height: 1.05rem; flex: none; }
.check label { font-size: 0.95rem; }

.form-foot { margin: 0.9rem 0 0; font-size: 0.9rem; }

/* Honeypot: off-screen, never shown, never in tab order. */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Live status region (landing state machine).
   It stays rendered while empty — a live region that appears only together
   with its content is often missed by screen readers. Empty it has no box of
   its own, so only the populated state takes up space. */
.waitlist-status:not(:empty) { margin: 1.25rem 0 0; }

/* Shared state blocks: landing JS states and server-rendered fragments */
.state {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 1.1rem 1.2rem;
  max-width: var(--measure);
}
.state--success { border-left-color: var(--ok); }
.state--error { border-left-color: var(--danger); }
.state__title { font-size: 1.2rem; margin-bottom: 0.4rem; }
.state__title:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.state__text { margin-bottom: 0.5rem; }
.state__text:last-child { margin-bottom: 0; }
.state__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }

/* Server-rendered pages built from fragments */
.page { padding: 2.5rem 0; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 2rem 0 2.5rem;
  color: var(--ink-muted);
  font-size: 0.92rem;
}
.footer-line { margin: 0 0 0.45rem; }
.footer-line--note { margin-top: 0.9rem; }
.footer-line--fine { margin-top: 0.9rem; font-size: 0.86rem; }
.slot { font-variant-numeric: tabular-nums; }

/* Privacy page */
.legal { padding: 2.5rem 0 3rem; }
.legal h2 { margin-top: 2rem; font-size: 1.2rem; }
.legal__slot {
  display: block;
  border-left: 2px solid var(--line);
  padding-left: 0.85rem;
  color: var(--ink-muted);
}

@media (min-width: 48rem) {
  h1 { font-size: 2.75rem; }
  .hero { padding: 5rem 0 3.5rem; }
  .section { padding: 3.5rem 0; }
}