/* Pons Codex Protocol V2: tokens, reset, primitives. Light ground, one pink accent. */
:root {
  --ground: #FBF1F2;
  --panel: #FFFFFF;
  --panel-2: #FDF7F8;
  --line: #EFE2E5;
  --line-2: #E3D2D7;

  --pink: #FE50AA;
  --pink-deep: #E8357F;
  --pink-wash: rgba(254, 80, 170, 0.08);
  --lilac: #DFCAF3;
  --mint: #A3D2C8;

  --ink: #1A0F1A;
  --grey: #6E6370;
  --grey-2: #9A8F99;

  --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 10px; --r: 14px; --r-lg: 22px;
  --gut: 26px; --maxw: 1140px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lift: 0 1px 2px rgba(26,15,26,0.04), 0 8px 24px rgba(26,15,26,0.05);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.55;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--pink); color: #fff; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1 1 auto; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pink { color: var(--pink); }
.muted { color: var(--grey); }
.hide, [hidden] { display: none !important; }
.center { text-align: center; }

.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey-2); }
.h1 { font-size: clamp(36px, 5.6vw, 66px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; margin: 0; }
.h2 { font-size: clamp(25px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; margin: 0; }
.h3 { font-size: 18px; letter-spacing: -0.015em; font-weight: 600; margin: 0; }
.sub { font-size: clamp(15px, 1.5vw, 18px); color: var(--grey); margin: 0; }
.small { font-size: 13.5px; color: var(--grey); }
.tiny { font-size: 12px; color: var(--grey-2); }

.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel);
  font-family: var(--mono); font-size: 12px; color: var(--grey);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grey-2); flex: none; }
.dot.on { background: var(--pink); animation: pulse 2.4s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(254,80,170,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(254,80,170,0); }
  100% { box-shadow: 0 0 0 0 rgba(254,80,170,0); }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 22px; border-radius: 999px; border: 1px solid transparent;
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer;
  background: var(--pink); color: #fff; box-shadow: 0 6px 18px rgba(254,80,170,0.28);
  transition: transform 0.16s var(--ease), background 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.btn:hover { transform: translateY(-1px); background: var(--pink-deep); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.ghost { background: var(--panel); color: var(--ink); border-color: var(--line-2); box-shadow: none; }
.btn.ghost:hover { border-color: var(--pink); background: var(--pink-wash); }
.btn.sm { padding: 9px 15px; font-size: 13px; }
.btn.block { width: 100%; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--lift); }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); }
.input {
  width: 100%; padding: 14px 15px; background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: var(--r); font-family: var(--mono); font-size: 14px; outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.input::placeholder { color: #C6B8BE; }
.input:focus { border-color: var(--pink); background: var(--panel); box-shadow: 0 0 0 4px rgba(254,80,170,0.12); }
.input.bad { border-color: #E0607F; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }