/* VeilProof — shared design system (prover page + verifier portal).
   Professional, restrained, fintech: deep navy, white cards, one teal
   accent. No framework, no images, no webfonts — it must load fast and
   read well on a phone. */

:root {
  --ink: #0f172a;
  --slate: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-soft: #f1f5f9;
  --bg: #f8fafc;
  --card: #ffffff;
  --accent: #0f766e;
  --accent-dark: #0c5e58;
  --accent-tint: #f0fdfa;
  --ok: #15803d;
  --ok-bg: #dcfce7;
  --ok-line: #bbf7d0;
  --err: #b91c1c;
  --err-bg: #fee2e2;
  --err-line: #fecaca;
  --amber: #92400e;
  --amber-bg: #fffbeb;
  --amber-line: #fde68a;
  --radius: 10px;
}

* { box-sizing: border-box; }

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

/* ---------- header ---------- */
.site-header {
  background: var(--ink);
  color: #fff;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.brand {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.brand .tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #99f6e4;
  border: 1px solid #134e4a;
  border-radius: 999px;
  vertical-align: middle;
}
.site-nav { display: flex; gap: 1.25rem; }
.site-nav a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff; }

/* ---------- layout ---------- */
.wrap { max-width: 880px; margin: 0 auto; padding: 0 1.25rem; }
main.wrap { padding-top: 0; padding-bottom: 2rem; }

h1 {
  font-size: 2.1rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
h2 { font-size: 1.15rem; line-height: 1.35; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.lede { font-size: 1.08rem; color: var(--slate); }

/* ---------- hero ---------- */
.hero { padding: 2.75rem 0 2rem; }
.hero-dark {
  background: var(--ink);
  color: #fff;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  margin: 2rem 0;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
}
.hero-dark .eyebrow { color: #5eead4; }
.hero-dark .lede { color: #cbd5e1; }
.cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* ---------- buttons & links ---------- */
button, .btn {
  display: inline-block;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  margin: 0.25rem 0.5rem 0.25rem 0;
}
button { background: var(--accent); color: #fff; }
button:hover { background: var(--accent-dark); }
button:disabled { cursor: not-allowed; opacity: 0.45; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--muted); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.btn-ghost:hover { border-color: #fff; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

/* ---------- hero grid + report mock ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2rem;
  align-items: center;
}
.report-mock {
  background: #fff;
  color: var(--ink);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.mock-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.mock-title { font-weight: 700; font-size: 1.05rem; }
.mock-id { font-size: 0.88rem; color: var(--muted); margin-bottom: 0.75rem; }
.mock-claims { margin: 0 0 0.75rem; }
.mock-claims td { padding: 0.35rem 0; font-size: 0.9rem; }
.mock-claims td:last-child { text-align: right; }
.mock-pass { color: var(--ok); font-weight: 700; }
.mock-ai { font-size: 0.9rem; margin-bottom: 0.5rem; }
.mock-foot { font-size: 0.82rem; color: var(--muted); margin-bottom: 0; }

/* ---------- sections ---------- */
.section { margin: 2.5rem 0; }
.section-title { font-size: 1.5rem; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.section-lede { color: var(--muted); margin-bottom: 1.25rem; }
.section h3 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }

/* ---------- how it works ---------- */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.how-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.how-item .step-num { margin-bottom: 0.75rem; }
.how-item strong { display: block; font-size: 1.02rem; margin-bottom: 0.35rem; }
.how-item span:last-child { font-size: 0.92rem; color: var(--muted); line-height: 1.55; }

/* ---------- proves table ---------- */
.proves-table td:first-child { font-weight: 600; white-space: nowrap; }
.proves-table { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.proves-table th, .proves-table td { padding: 0.65rem 0.9rem; }

/* ---------- use cases ---------- */
.use-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.use-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.use-item strong { display: block; font-size: 1rem; margin-bottom: 0.3rem; }
.use-item span { font-size: 0.92rem; color: var(--muted); line-height: 1.55; }

/* ---------- strips ---------- */
.strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0 0 2rem;
}
.strip-item {
  padding: 1rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
}
.strip-item strong { display: block; font-size: 0.95rem; margin-bottom: 0.25rem; }
.strip-item span { font-size: 0.88rem; color: var(--muted); line-height: 1.5; }

/* ---------- live proof ---------- */
.proof-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.proof-head h2 { font-size: 1.2rem; }
.badge-valid {
  flex: 0 0 auto;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #166534;
  background: var(--ok-bg);
  border: 1px solid var(--ok-line);
  border-radius: 999px;
}
.proof-card table { margin: 0.5rem 0 1rem; }
.proof-card td:last-child { font-weight: 700; color: var(--ok); }

/* ---------- flow timeline ---------- */
.flow { position: relative; }
.flow::before {
  content: '';
  position: absolute;
  left: 38px;
  top: 32px;
  bottom: 32px;
  width: 2px;
  background: #cbd5e1;
}
.flow .card { position: relative; }
.flow .step-num { box-shadow: 0 0 0 4px #fff; position: relative; z-index: 1; }

/* ---------- cards & steps ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 0 0 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.step-head { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 0.75rem; }
.step-num {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  line-height: 1.75rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  margin-top: 0.05rem;
}
.step-head h2 { padding-top: 0.15rem; }

/* ---------- callouts ---------- */
.note, .guarantee {
  background: var(--accent-tint);
  border: 1px solid #ccfbf1;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
}
.warn {
  background: var(--amber-bg);
  border: 1px solid var(--amber-line);
  border-left: 4px solid #d97706;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  color: var(--amber);
  margin: 0 0 1rem;
}

/* ---------- forms ---------- */
label { display: block; font-size: 0.92rem; font-weight: 600; margin-bottom: 0.35rem; }
textarea, input, select {
  width: 100%;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88rem;
  padding: 0.6rem 0.75rem;
  margin: 0.25rem 0 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}
textarea { min-height: 5rem; }
textarea:focus, input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}
select { font-family: inherit; }
input[type="checkbox"] { width: auto; margin: 0 0.4rem 0 0; vertical-align: middle; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row > label { flex: 1 1 200px; }

/* ---------- results ---------- */
pre {
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem;
  overflow-x: auto;
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 1rem;
}
table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
th, td { border-bottom: 1px solid var(--line); padding: 0.5rem 0.75rem; text-align: left; font-size: 0.9rem; }
th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; word-break: break-all; }
.muted { color: var(--muted); font-size: 0.9rem; }
.error { color: var(--err); font-weight: 700; }
.ok { color: var(--ok); font-weight: 700; }

/* ---------- verify certificate ---------- */
.banner {
  padding: 1rem 1.25rem;
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: var(--radius);
  margin: 1rem 0;
  border: 1px solid transparent;
}
.banner.valid { background: var(--ok-bg); color: #166534; border-color: var(--ok-line); }
.banner.warn { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }
.banner.invalid { background: var(--err-bg); color: #991b1b; border-color: var(--err-line); }
.status-row { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.status-row:last-child { border-bottom: 0; }
.status-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.status-head strong { font-size: 1rem; }
.pill {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill.ok { color: #166534; background: var(--ok-bg); border-color: var(--ok-line); }
.pill.warn { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-line); }
.pill.bad { color: #991b1b; background: var(--err-bg); border-color: var(--err-line); }
.status-detail { color: var(--muted); font-size: 0.9rem; margin-top: 0.25rem; }
.status-notes p { font-size: 0.92rem; margin-bottom: 0.5rem; }
.check { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.check .mark { font-weight: 700; }
.check.pass .mark { color: var(--ok); }
.check.fail .mark { color: var(--err); }
.check .detail { color: var(--muted); font-size: 0.9rem; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.75rem 0 2.5rem;
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.site-footer p { margin-bottom: 0.35rem; }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1rem; }
.table-scroll table { margin: 0; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .how-grid { grid-template-columns: 1fr; }
  .use-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  h1 { font-size: 1.6rem; }
  .hero { padding: 2rem 0 1.5rem; }
  .hero-dark { padding: 1.75rem 1.25rem; margin: 1.25rem 0; border-radius: 12px; }
  .flow::before { left: 34px; }
  .strip { grid-template-columns: 1fr; gap: 0.75rem; }
  .card { padding: 1.25rem; }
  .site-nav { gap: 0.85rem; }
  .site-nav a { font-size: 0.88rem; }
  .brand .tag { display: none; }
  /* Hero calls to action stack full-width so they are easy to tap. */
  .cta-row button, .cta-row .btn { flex: 1 1 100%; margin-right: 0; text-align: center; }
  /* The "what it proves" table stacks: each row becomes a card with
     the claim as its heading, so nothing overflows a phone screen. */
  .proves-table { border: 0; background: transparent; }
  .proves-table tr:first-child { display: none; }
  .proves-table tr { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem; margin-bottom: 0.75rem; }
  .proves-table td { display: block; border: 0; padding: 0; }
  .proves-table td:first-child { white-space: normal; margin-bottom: 0.25rem; }
}

/* ---------- live background ---------- */
/* A slow, clearly visible animated backdrop: three large, saturated
   orbs drift across a softly tinted base, plus a faint dot grid.
   The orbs are big and bright enough to read on a phone, where only
   the margins around the cards show the background. Content always
   sits on solid cards above it, so readability never depends on the
   animation. The orbs are decorative only (aria-hidden in the markup). */
body {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(13, 148, 136, 0.22), transparent 60%),
    radial-gradient(900px 480px at -10% 30%, rgba(59, 130, 246, 0.18), transparent 60%),
    linear-gradient(180deg, #e6f7f3 0%, #f8fafc 35%, #eef2ff 100%);
}
.bg-live {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg-live::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 26px 26px;
}
.bg-live .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.9;
}
.bg-live .orb-1 {
  width: 560px; height: 560px;
  left: -60px; top: 2%;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.85), transparent 65%);
  animation: orb-drift-1 36s ease-in-out infinite alternate;
}
.bg-live .orb-2 {
  width: 500px; height: 500px;
  right: -40px; top: 30%;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.8), transparent 65%);
  animation: orb-drift-2 44s ease-in-out infinite alternate;
}
.bg-live .orb-3 {
  width: 440px; height: 440px;
  left: 25%; bottom: -60px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.75), transparent 65%);
  animation: orb-drift-3 52s ease-in-out infinite alternate;
}
@keyframes orb-drift-1 {
  from { transform: translate(0, 0); }
  to { transform: translate(90px, 60px); }
}
@keyframes orb-drift-2 {
  from { transform: translate(0, 0); }
  to { transform: translate(-70px, 80px); }
}
@keyframes orb-drift-3 {
  from { transform: translate(0, 0); }
  to { transform: translate(60px, -70px); }
}
.site-header, main, .site-footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .bg-live .orb { animation: none; }
}

/* ---------- sticky header + mobile nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.18);
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.45rem 0.65rem;
  margin: 0;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.08); }
@media (max-width: 760px) {
  .nav-toggle { display: inline-block; }
  .site-header .wrap { flex-wrap: nowrap; }
  .site-nav {
    display: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 0.25rem 0 0.5rem;
  }
  .site-header.nav-open .site-nav { display: flex; }
  .site-nav a {
    padding: 0.55rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.95rem;
  }
}

/* ---------- page hero (inner pages) ---------- */
.page-hero {
  background: var(--ink);
  color: #fff;
  border-radius: 16px;
  padding: 2.25rem 2rem;
  margin: 2rem 0 0;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
}
.page-hero .eyebrow { color: #5eead4; }
.page-hero .lede { color: #cbd5e1; margin-bottom: 0; }
.page-hero h1 { margin-bottom: 0.75rem; }
@media (max-width: 640px) {
  .page-hero { padding: 1.75rem 1.25rem; margin-top: 1.25rem; border-radius: 12px; }
}

/* ---------- feature cards ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0 0 1rem;
}
.feature-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.4rem 1.35rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  border-color: #99f6e4;
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--accent);
  margin-bottom: 0.85rem;
}
.feature-icon svg { width: 1.35rem; height: 1.35rem; }
.feature-card h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.feature-card p { font-size: 0.93rem; color: var(--muted); margin-bottom: 0; }
@media (max-width: 760px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* ---------- enhanced cards ---------- */
.card {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.04);
}
.card h3 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }
.card h3:first-child { margin-top: 0; }

/* ---------- call to action band ---------- */
.cta-band {
  background: var(--ink);
  color: #fff;
  border-radius: 16px;
  padding: 2rem;
  margin: 2.5rem 0 0;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
  text-align: center;
}
.cta-band h2 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.cta-band p { color: #cbd5e1; margin-bottom: 1.25rem; }
.cta-band .cta-row { justify-content: center; margin-top: 0; }
@media (max-width: 640px) {
  .cta-band { padding: 1.75rem 1.25rem; border-radius: 12px; }
}