/* Empora public marketing site.
   Standalone from the React app: no build step, no framework, no API calls.
   Brand tokens mirror tailwind.config.js (empora-gold #D4AF37, Cormorant/Inter). */

:root {
  --bg: #0a0a0a;
  --panel: rgba(255, 255, 255, 0.05);
  --panel-hover: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.1);
  --gold: #d4af37;
  --gold-dim: #b8952e;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --muted-2: rgba(255, 255, 255, 0.45);
  --radius: 16px;
  --measure: 68ch;
}

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

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

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

body {
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%),
    radial-gradient(circle at 25% 20%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 78% 78%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: Cormorant, Georgia, serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: #e4c15c; text-decoration: underline; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--gold);
  color: #0a0a0a;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  z-index: 10;
}
.skip-link:focus { left: 16px; }

.wrap {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 5;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-block: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  font-family: Cormorant, Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.brand:hover { color: var(--text); text-decoration: none; }
.brand img { width: 32px; height: 32px; display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 30px);
  font-size: 0.95rem;
}
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--gold); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--text); }

/* ---------- layout blocks ---------- */

main { display: block; }

section { padding-block: clamp(48px, 8vw, 88px); }
section + section { border-top: 1px solid var(--line); }

.hero { padding-block: clamp(64px, 12vw, 128px); }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(2.8rem, 8vw, 5rem);
  margin-bottom: 24px;
}

.lede {
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  color: var(--muted);
  max-width: var(--measure);
}

h2 { font-size: clamp(2rem, 4.5vw, 2.9rem); margin-bottom: 20px; }
h3 { font-size: 1.3rem; margin-bottom: 10px; }

p { max-width: var(--measure); color: var(--muted); }
p + p { margin-top: 16px; }

.page-head { padding-block: clamp(48px, 9vw, 96px) clamp(24px, 4vw, 40px); }
.page-head h1 { font-size: clamp(2.4rem, 6.5vw, 4rem); margin-bottom: 16px; }

/* ---------- cards ---------- */

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: 40px;
}

.card {
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: background 0.25s, border-color 0.25s;
}
.card:hover { background: var(--panel-hover); border-color: rgba(212, 175, 55, 0.3); }
.card p { color: var(--muted); font-size: 0.98rem; }

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: var(--gold);
  font-family: Cormorant, Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 16px;
}

/* ---------- calls to action ---------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 12px;
  font-size: 0.98rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: opacity 0.2s, transform 0.2s, border-color 0.2s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
  color: #0a0a0a;
}
.btn-primary:hover { color: #0a0a0a; opacity: 0.92; }

.btn-ghost {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel);
}
.btn-ghost:hover { color: var(--text); border-color: rgba(212, 175, 55, 0.45); }

/* ---------- long-form documents (legal pages) ---------- */

.doc { max-width: var(--measure); }
.doc h2 { font-size: clamp(1.5rem, 3.2vw, 1.9rem); margin-top: 44px; margin-bottom: 12px; }
.doc h2:first-of-type { margin-top: 0; }
.doc ul { margin: 16px 0 0 22px; color: var(--muted); }
.doc li { margin-bottom: 8px; }
.doc .updated { color: var(--muted-2); font-size: 0.9rem; }

.notice {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  padding: 20px 24px;
  margin-top: 32px;
}
.notice p { color: var(--muted); }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 44px;
  margin-top: 24px;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 0.92rem;
}
.site-footer nav a { color: var(--muted); }
.site-footer nav a:hover { color: var(--gold); text-decoration: none; }

.site-footer small { color: var(--muted-2); font-size: 0.85rem; display: block; }
.site-footer .legal-name { margin-top: 6px; }

/* Even 2x2 block for four-item sections, instead of an orphaned third row. */
@media (min-width: 760px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- email signup ----------
   Kit's embed ships its own light-theme stylesheet. We strip it at paste time
   and restyle the same markup here, so the form inherits the site palette and
   there is no specificity fight. Class names must stay as Kit's script reads
   them (formkit-*, seva-*) and toggles data-active on submit. */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.signup { margin-top: 32px; max-width: 560px; }
.signup-fallback { color: var(--muted-2); font-size: 0.95rem; }

.formkit-form { position: relative; }

.formkit-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.formkit-field { flex: 1 1 240px; }

.formkit-input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit;
  font-size: 0.98rem;
  outline: none;
  transition: border-color 0.25s;
}
.formkit-input:focus { border-color: rgba(212, 175, 55, 0.55); }
.formkit-input::placeholder { color: var(--muted-2); }

.formkit-submit {
  position: relative;
  flex: 0 0 auto;
  padding: 13px 28px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
  color: #0a0a0a;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.formkit-submit:hover { opacity: 0.92; transform: translateY(-1px); }

.formkit-guarantee { margin-top: 14px; }
.formkit-guarantee p { color: var(--muted-2); font-size: 0.85rem; max-width: none; }

.formkit-alert { margin: 0 0 12px; padding: 0; list-style: none; font-size: 0.9rem; color: #f87171; }
.formkit-alert:empty { display: none; }
.formkit-alert-success { color: var(--gold); }

.formkit-powered-by-convertkit-container { margin-top: 16px; }
.formkit-powered-by-convertkit { color: var(--muted-2); font-size: 0.78rem; }
.formkit-powered-by-convertkit:hover { color: var(--muted); text-decoration: none; }

/* Kit sets data-active on the button while the request is in flight. */
.formkit-spinner { display: none; }
.formkit-submit[data-active] .formkit-spinner {
  display: flex;
  gap: 5px;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}
.formkit-submit[data-active] .formkit-spinner > div {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #0a0a0a;
  animation: ck-bounce 1.4s infinite ease-in-out both;
}
.formkit-submit[data-active] .formkit-spinner > div:nth-child(1) { animation-delay: -0.32s; }
.formkit-submit[data-active] .formkit-spinner > div:nth-child(2) { animation-delay: -0.16s; }
.formkit-submit[data-active] span { opacity: 0; }

@keyframes ck-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}