/* ─────────────────────────────────────────
   Nevo site — shared styles for every page on nevoapp.io.
   Mirrors the app's design language (src/theme.ts): white on deep maroon,
   one white separated by opacity (no accent hue), Playfair Display for display
   text only, ExtraBold for the wordmark, system sans for everything else,
   hairlines instead of borders, tight radii.
   ───────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,800;1,500&display=swap');

:root {
  --ground: #5C0000;
  --ground-deep: #3D0000;
  --panel: #4C0707;
  --display: #FFFFFF;
  --body: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.62);
  --faint: rgba(255, 255, 255, 0.42);
  --hairline: rgba(255, 255, 255, 0.12);
  --hairline-strong: rgba(255, 255, 255, 0.28);
  --ink: #2A1414;
  --serif: 'Playfair Display', 'Iowan Old Style', Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--ground);
  color: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--display); }

/* ── Type ── */
.wordmark { font-family: var(--serif); font-weight: 800; color: var(--display); text-decoration: none; letter-spacing: 0.2px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--display); }
.meta { font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.serif { font-family: var(--serif); font-weight: 600; color: var(--display); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 30px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--display); color: var(--ink);
  font: 700 15px var(--sans); text-decoration: none; white-space: nowrap;
  transition: transform 0.15s, opacity 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.btn-outline { background: transparent; color: var(--display); border: 1px solid var(--hairline-strong); }

/* ── Site header (all pages) ── */
.site-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; background: var(--ground-deep); border-bottom: 1px solid var(--hairline);
}
.site-nav .wordmark { font-size: 26px; }
.site-nav .btn { padding: 9px 18px; font-size: 13px; }
.site-nav .btn svg { width: 15px; height: 15px; }

.site-footer {
  border-top: 1px solid var(--hairline); background: var(--ground-deep);
  padding: 28px 24px; text-align: center; font-size: 13px; color: var(--faint);
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--display); }

/* ── Legal pages (privacy, terms) ── */
.doc-head { padding: 64px 24px 40px; text-align: center; border-bottom: 1px solid var(--hairline); }
.doc-head h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 6vw, 48px); line-height: 1.15; color: var(--display); }
.doc-head .meta { margin-top: 14px; }

.doc { max-width: 760px; margin: 0 auto; padding: 48px 28px 88px; font-size: 15.5px; }
.doc h2 {
  font-family: var(--serif); font-weight: 600; font-size: 23px; line-height: 1.3; color: var(--display);
  margin: 48px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline-strong);
}
.doc h3 { font-size: 15px; font-weight: 700; color: var(--display); margin: 24px 0 8px; }
.doc p { margin-bottom: 14px; color: var(--body); }
.doc ul, .doc ol { margin: 8px 0 16px 22px; }
.doc li { margin-bottom: 7px; color: var(--body); }
.doc strong { color: var(--display); }
.doc a { color: var(--display); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }

.doc table { width: 100%; border-collapse: collapse; margin: 16px 0 20px; font-size: 14px; }
.doc th {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline-strong);
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--display);
}
.doc td { padding: 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; color: var(--body); }
.table-wrap { overflow-x: auto; }

.doc .intro, .doc .highlight-box, .doc .contact-block {
  background: var(--panel); border: 1px solid var(--hairline-strong); border-radius: var(--radius);
  padding: 20px 24px; margin: 16px 0 24px;
}
.doc .intro { font-size: 15px; }
.doc .intro p:last-child, .doc .highlight-box p:last-child, .doc .contact-block p:last-child { margin-bottom: 0; }
.doc .contact-block { margin-top: 18px; }

/* ── Single-message pages (email confirmed, errors, new password) ── */
.solo { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.solo-card { max-width: 420px; width: 100%; }
.solo .wordmark { display: block; font-size: 34px; margin-bottom: 28px; }
.solo h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 6vw, 40px); line-height: 1.15; color: var(--display); margin-bottom: 14px; }
.solo p { color: var(--muted); font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
.solo .mark {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 24px;
  border: 1px solid var(--hairline-strong); display: flex; align-items: center; justify-content: center;
}
.solo .mark svg { width: 28px; height: 28px; }
.field {
  width: 100%; padding: 15px 16px; margin-bottom: 14px; border-radius: var(--radius);
  border: 1px solid var(--hairline-strong); background: rgba(255, 255, 255, 0.06);
  color: var(--display); font: 15px var(--sans); outline: none;
}
.field::placeholder { color: var(--faint); }
.field:focus { border-color: var(--display); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rise { animation: fadeUp 0.7s ease both; }
.rise-2 { animation: fadeUp 0.7s ease 0.12s both; }
.rise-3 { animation: fadeUp 0.7s ease 0.24s both; }
@media (prefers-reduced-motion: reduce) { .rise, .rise-2, .rise-3 { animation: none; } }

@media (max-width: 600px) {
  .site-nav { padding: 14px 20px; }
  .doc { padding: 36px 20px 64px; }
  .doc table { font-size: 13px; }
  .doc th, .doc td { padding: 9px 8px; }
}

@media print {
  body { background: #fff; color: #111; }
  .site-nav, .site-footer { display: none; }
  .doc h2, .doc-head h1, .doc strong, .doc th { color: #111; }
  .doc p, .doc li, .doc td { color: #222; }
  .doc .intro, .doc .highlight-box, .doc .contact-block { background: #f5f0f0; }
}