/* EON — brand foundation
   Light editorial · production blue. Tokens, base type, buttons and the card
   language are ported verbatim from the EON StoryBoard landing system so this
   site reads as the same brand.

   Colour budget (from the EON brand bible): 80% surfaces, 15% hierarchy,
   5% accent. No new brand colours — additional colour appears only for
   semantic states, which here means valid / revoked / not-found. */

:root {
  --canvas: #fffdf8;
  --canvas-blue: #f5f8fc;
  --surface: #ffffff;
  --panel-blue: #eef5ff;
  --border: #dbe5f0;
  --border-strong: #c5d4e6;
  --text: #172033;
  --body: #4c5d73;
  --muted: #708097;
  --blue: #1f5eff;
  --blue-deep: #1746b8;
  --teal: #0f8b8d;

  /* Semantic states. Teal is the existing brand token doing double duty as
     "success" — deliberately reusing it rather than introducing a green. */
  --ok: #0f8b8d;
  --ok-bg: #effbfa;
  --ok-border: #a7ddd9;
  --warn: #b45309;
  --warn-bg: #fffbeb;
  --warn-border: #fcd34d;
  --err: #b91c1c;
  --err-bg: #fef2f2;
  --err-border: #fecaca;

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --container: 1240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(1200px 600px at 80% -200px, #e8f0fc 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 400px, #fff5e6 0%, transparent 55%),
    linear-gradient(180deg, var(--canvas) 0%, var(--canvas) 40%, var(--canvas-blue) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
::selection { background: var(--blue); color: #fff; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 660px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

/* ---------- Type ---------- */
.h-display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.02;
  color: var(--text);
  margin: 0;
}
.h-display em { font-style: italic; color: var(--blue); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--border-strong); }
.eyebrow.no-rule::before { display: none; }

.lede { color: var(--body); font-size: 16.5px; margin: 0; }
.mono { font-family: var(--mono); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 44px; padding: 0 20px;
  border-radius: 10px;
  font: 500 14px/1 var(--sans);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: transform .16s, background .16s, box-shadow .16s, border-color .16s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--blue); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 16px -6px rgba(31,94,255,.5);
}
.btn-primary:hover { background: var(--blue-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface); border-color: var(--border-strong); }
.btn-line { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-line:hover { border-color: var(--text); }
.btn-danger { background: var(--surface); color: var(--err); border-color: var(--err-border); }
.btn-danger:hover { background: var(--err-bg); border-color: var(--err); }
.btn-sm { height: 34px; padding: 0 13px; font-size: 13px; border-radius: 8px; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; pointer-events: none;
}
.btn-arrow { transition: transform .2s; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Surfaces ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(23,32,51,.04), 0 12px 32px -20px rgba(23,32,51,.28);
}
.panel {
  background: var(--panel-blue);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255,253,248,.74);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.nav.scrolled { border-bottom-color: var(--border); background: rgba(255,253,248,.9); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; }
.brand img { width: 26px; height: 26px; flex-shrink: 0; }
.brand-eon {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--muted); padding: 4px 7px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface);
}

/* ---------- Status pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 11px;
  border-radius: 999px;
  font: 500 12px/1 var(--sans);
  letter-spacing: .01em;
  border: 1px solid transparent;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pill-ok   { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-border); }
.pill-ok   .dot { background: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.pill-warn .dot { background: var(--warn); }
.pill-err  { background: var(--err-bg);  color: var(--err);  border-color: var(--err-border); }
.pill-err  .dot { background: var(--err); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.input {
  height: 44px; padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: 400 15px/1 var(--sans);
  color: var(--text);
  transition: border-color .16s, box-shadow .16s;
  width: 100%;
}
.input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31,94,255,.12);
}
.input::placeholder { color: var(--muted); opacity: .7; }
textarea.input { height: auto; padding: 11px 14px; line-height: 1.5; resize: vertical; }

.form-error {
  color: var(--err); font-size: 13.5px;
  display: flex; align-items: flex-start; gap: 7px;
}

/* ---------- Motion ---------- */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(15,139,141,.15); }
  50%      { box-shadow: 0 0 0 8px rgba(15,139,141,.05); }
}
@keyframes float-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.float-in { animation: float-in .5s cubic-bezier(.2,.7,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Utility ---------- */
.hidden { display: none !important; }
.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;
}