/* PeerSigned — modern, slightly loud, dark+light via prefers-color-scheme.
   The hero band stays ink-dark in both modes; everything else follows the theme. */

:root {
  --bg: #FAFAF8;
  --bg-alt: #F0F1EC;
  --card: #FFFFFF;
  --fg: #15171C;
  --fg-2: #4E535C;
  --faint: #9BA0A8;
  --rule: #E2E2DC;
  --accent: #1C43C0;
  --accent-hover: #142F8E;
  --accent-ink: #FFFFFF;      /* text on accent */
  --hl: rgba(28, 67, 192, 0.18);
  --good: #1E6E46;
  --bad: #B4231F;
  --input-border: #C9C9C2;
  /* the fixed dark band (hero/header) — same in both modes */
  --band: #0E1013;
  --band-fg: #F2F2EF;
  --band-fg-2: #A9AFBA;
  --band-rule: #262B33;
  --band-accent: #8FA8FF;
  --band-accent-ink: #0E1013;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101318;
    --bg-alt: #171B21;
    --card: #1C2129;
    --fg: #F0F1F3;
    --fg-2: #A9AFBA;
    --faint: #6C737E;
    --rule: #2A2F38;
    --accent: #8FA8FF;
    --accent-hover: #A8BCFF;
    --accent-ink: #0E1013;
    --hl: rgba(143, 168, 255, 0.22);
    --good: #6FCB98;
    --bad: #FF8A80;
    --input-border: #3A404B;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

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

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.04rem;
  line-height: 1.6;
}

.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }

a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* type */
h1 {
  font-size: clamp(2.8rem, 8vw, 5.4rem);
  line-height: 0.98; font-weight: 800; letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 1.1rem;
}
h3 { font-size: 1.08rem; font-weight: 750; margin-bottom: 0.35rem; }
.eyebrow {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.7rem; font-weight: 600;
}
.lede { font-size: 1.15rem; color: var(--fg-2); max-width: 58ch; }
.muted { color: var(--fg-2); }
.small { font-size: 0.9rem; }
.mono { font-family: var(--mono); font-size: 0.9em; }

/* the marker sweep */
.hl {
  background: linear-gradient(to top, var(--hl) 0 38%, transparent 38%);
  padding: 0 0.08em;
}

section { padding: 4rem 0; }
section.alt { background: var(--bg-alt); }

/* header */
header.site { background: var(--band); border-bottom: 1px solid var(--band-rule); }
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1rem; padding-bottom: 1rem; gap: 1rem; flex-wrap: wrap;
}
.wordmark {
  font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em;
  color: var(--band-fg); text-decoration: none;
}
.wordmark .signed { color: var(--band-accent); }
nav.site { display: flex; align-items: center; gap: 1.3rem; }
nav.site a { font-size: 0.9rem; color: var(--band-fg-2); text-decoration: none; }
nav.site a:hover { color: var(--band-fg); text-decoration: underline; }
nav.site a.cta {
  background: var(--band-accent); color: var(--band-accent-ink);
  font-weight: 700; border-radius: 5px; padding: 0.45rem 0.9rem;
}
nav.site a.cta:hover { text-decoration: none; filter: brightness(1.08); }

/* hero — the billboard */
.hero {
  background: var(--band); color: var(--band-fg);
  padding: 4.5rem 0 4.5rem;
}
.hero h1 { color: #fff; max-width: 14ch; }
.punches { margin-top: 2rem; }
.punches p {
  font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 750; letter-spacing: -0.01em;
  color: #fff; line-height: 1.25;
}
.punches p.fix { color: var(--band-accent); margin-top: 0.4rem; }
.offer {
  font-family: var(--mono); font-size: 0.95rem; color: var(--band-fg);
  margin-top: 2rem; letter-spacing: 0.02em;
}
.offer b { color: var(--band-accent); font-weight: 700; }

.hero a { color: var(--band-accent); }
.rev-alt { margin-top: 0.9rem; font-size: 0.95rem; color: var(--band-fg-2); }

/* DOI form (lives on the band) */
.doi-box { margin-top: 1.2rem; max-width: 42rem; }
.doi-box label {
  display: block; font-size: 0.9rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--band-fg);
}
.doi-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
input[type="text"], input[type="email"], input[type="url"], select {
  font-family: var(--mono); font-size: 0.95rem; color: var(--fg);
  background: var(--card); border: 1px solid var(--input-border); border-radius: 5px;
  padding: 0.7rem 0.8rem; flex: 1 1 16rem; min-width: 0;
}
.hero input[type="text"], .hero input[type="email"] { background: #fff; color: #15171C; border-color: #3A404B; }
input::placeholder { color: var(--faint); }
button.primary {
  font-size: 0.98rem; font-weight: 750; color: var(--accent-ink);
  background: var(--accent); border: none; border-radius: 5px;
  padding: 0.7rem 1.3rem; cursor: pointer;
}
button.primary:hover { background: var(--accent-hover); }
button.primary:disabled { background: var(--faint); cursor: default; }
.hero button.primary { background: var(--band-accent); color: var(--band-accent-ink); }
.hero button.primary:hover { filter: brightness(1.08); }
.doi-help { font-size: 0.88rem; color: var(--band-fg-2); margin-top: 0.6rem; }

.doi-result {
  margin-top: 1rem; border: 1px solid var(--band-rule); border-left: 3px solid var(--good);
  background: var(--card); color: var(--fg); border-radius: 5px; padding: 0.9rem 1rem;
  font-size: 0.95rem;
}
.doi-result.err { border-left-color: var(--bad); }
.doi-result .t { font-weight: 700; }
.doi-result .m { color: var(--fg-2); font-size: 0.88rem; margin-top: 0.15rem; }
.doi-result a { color: var(--accent); }

.details { margin-top: 1rem; display: grid; gap: 0.9rem; }
.details .field label { display: block; font-size: 0.88rem; font-weight: 700; margin-bottom: 0.35rem; color: var(--band-fg); }
.details .field input { width: 100%; }
fieldset.vis {
  border: 1px solid var(--band-rule); border-radius: 5px; padding: 0.9rem 1rem;
  background: var(--card); color: var(--fg);
}
fieldset.vis legend { font-size: 0.88rem; font-weight: 700; padding: 0 0.35rem; color: var(--band-fg); }
fieldset.vis label { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.92rem; margin-top: 0.5rem; cursor: pointer; }
fieldset.vis input { flex: 0 0 auto; margin-top: 0.3rem; }
.ack {
  display: none; margin-top: 0.7rem; padding: 0.7rem 0.8rem; background: var(--bg-alt);
  border-radius: 5px; font-size: 0.88rem;
}
.ack.show { display: block; }
.ack label { margin-top: 0.4rem; }
.form-msg { font-size: 0.9rem; margin-top: 0.5rem; color: var(--band-fg-2); }
.form-msg.err { color: var(--bad); }
.form-msg.ok { color: var(--good); }

/* split: what you're buying + specimen */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 52rem) { .split { grid-template-columns: 1fr; } }
.get p { color: var(--fg-2); font-size: 1rem; margin-bottom: 0.9rem; }
.get p strong, .get li strong { color: var(--fg); }
ul.deliver { list-style: none; margin: 0 0 1rem; }
ul.deliver li {
  color: var(--fg-2); font-size: 0.98rem; margin-bottom: 0.7rem;
  padding-left: 1.1rem; position: relative;
}
ul.deliver li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 0.45em; height: 0.45em; background: var(--accent); border-radius: 1px;
}

/* specimen */
.specimen {
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.specimen .head {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--fg-2); background: var(--bg-alt); border-bottom: 1px solid var(--rule);
  padding: 0.55rem 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.specimen .body { padding: 1.1rem 1.2rem; font-size: 0.95rem; }
.specimen .fieldrow { margin-bottom: 0.85rem; }
.specimen .fl {
  font-size: 0.7rem; letter-spacing: 0.08em; font-weight: 700;
  text-transform: uppercase; color: var(--fg-2); margin-bottom: 0.15rem;
}
.specimen .fv { font-size: 0.95rem; }
.specimen .fv.mono { font-size: 0.85rem; }
.specimen .placeholder { color: var(--faint); }
.specimen .sig {
  border-top: 1px solid var(--rule); margin-top: 1.1rem; padding-top: 0.9rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
}
.specimen .signline { border-bottom: 2px solid var(--accent); min-width: 11rem; padding-bottom: 0.15rem; color: var(--faint); font-size: 0.9rem; }
.specimen .signed-mark { font-family: var(--mono); font-size: 0.78rem; color: var(--accent); }
.specimen-caption { font-size: 0.85rem; color: var(--fg-2); margin-top: 0.7rem; }

/* versus table */
.vs { max-width: 54rem; }
.vs-table { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin-top: 1.5rem; }
.vs-row { display: grid; grid-template-columns: 9rem 1fr 1fr; }
.vs-row + .vs-row { border-top: 1px solid var(--rule); }
.vs-row > div { padding: 0.85rem 1rem; font-size: 0.93rem; }
.vs-row .dim { font-weight: 750; font-size: 0.85rem; }
.vs-row .them { color: var(--fg-2); background: var(--bg-alt); }
.vs-row .us { background: var(--card); }
.vs-row.headr > div {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-2); padding: 0.6rem 1rem;
}
.vs-row.headr .us { color: var(--accent); font-weight: 700; }
@media (max-width: 44rem) {
  .vs-row { grid-template-columns: 1fr; }
  .vs-row .dim { padding-bottom: 0.2rem; }
  .vs-row .them { border-top: 1px dashed var(--rule); }
  .vs-row .us { border-top: 1px dashed var(--rule); }
  .vs-row.headr { display: none; }
  .vs-row .them::before { content: "journal: "; font-weight: 700; }
  .vs-row .us::before { content: "PeerSigned: "; font-weight: 700; color: var(--accent); }
}

/* the gap */
.gap { max-width: 50rem; }
.gap > p { color: var(--fg-2); }
.gaprow {
  display: grid; grid-template-columns: 13rem 1fr; gap: 1rem;
  padding: 0.85rem 0; border-top: 1px solid var(--rule);
}
.gaprow:last-of-type { border-bottom: 1px solid var(--rule); }
.gaprow .who { font-weight: 750; font-size: 0.98rem; }
.gaprow .what { color: var(--fg-2); font-size: 0.98rem; }
@media (max-width: 40rem) { .gaprow { grid-template-columns: 1fr; gap: 0.15rem; } }
.gap-close { margin-top: 1.4rem; font-size: 1.1rem; font-weight: 600; }

/* timeline */
.timeline { max-width: 46rem; }
.trow {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.2rem;
  padding: 1rem 0 1rem 1.2rem; border-left: 3px solid var(--accent);
  margin-left: 0.2rem;
}
.tday { font-family: var(--mono); font-size: 0.85rem; color: var(--accent); padding-top: 0.2rem; }
.ttext { color: var(--fg-2); font-size: 0.98rem; }
.ttext strong { color: var(--fg); }
@media (max-width: 40rem) { .trow { grid-template-columns: 1fr; gap: 0.2rem; } }

/* isn't */
.isnt { max-width: 46rem; }
.isnt > p { color: var(--fg-2); }
.isnt h3 { margin-top: 1.4rem; }
.isnt p + h3 { margin-top: 1.4rem; }
.isnt h3 + p { color: var(--fg-2); font-size: 0.98rem; }

/* price */
.pricebox {
  background: var(--card); border: 2px solid var(--accent); border-radius: 10px;
  padding: 2rem; max-width: 36rem;
}
.pricebox .amount {
  font-size: clamp(3rem, 7vw, 4.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
}
.pricebox .amount span { font-size: 1rem; font-weight: 500; color: var(--fg-2); letter-spacing: 0; }
.pricebox p { font-size: 0.98rem; color: var(--fg-2); margin-top: 0.9rem; }
.pricebox .refund { border-top: 1px solid var(--rule); margin-top: 1.1rem; padding-top: 1rem; }
.pricebox strong { color: var(--fg); }
a.jump { font-weight: 700; }

/* reviewer strip */
.rev-cta { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.rev-cta .txt { max-width: 40rem; }
a.button {
  display: inline-block; font-size: 0.98rem; font-weight: 750;
  color: var(--accent-ink); background: var(--accent); text-decoration: none; border-radius: 5px;
  padding: 0.8rem 1.4rem; white-space: nowrap;
}
a.button:hover { background: var(--accent-hover); color: var(--accent-ink); }

/* prose pages */
.prose { max-width: 44rem; padding: 3rem 0 4rem; }
.prose h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin-bottom: 1.2rem; letter-spacing: -0.02em; }
.prose h2 { font-size: 1.35rem; margin: 2.2rem 0 0.6rem; }
.prose p { margin-bottom: 1rem; }
.prose ul { margin: 0 0 1rem 1.2rem; }
.prose li { margin-bottom: 0.4rem; }
.venue { border: 1px solid var(--rule); background: var(--card); border-radius: 8px; padding: 1.1rem 1.3rem; margin-bottom: 1rem; }
.venue h3 { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.venue .facts { font-family: var(--mono); font-size: 0.75rem; color: var(--fg-2); font-weight: 400; }
.venue p { margin: 0.4rem 0 0; color: var(--fg-2); font-size: 0.95rem; }
.disclosure { background: var(--bg-alt); border-left: 3px solid var(--accent); padding: 0.7rem 0.9rem; font-size: 0.9rem; margin-top: 0.6rem; }

/* waitlist form */
form.stack { display: grid; gap: 0.9rem; max-width: 30rem; margin-top: 1.5rem; }
form.stack label { display: block; font-size: 0.88rem; font-weight: 700; margin-bottom: 0.35rem; }
form.stack input { width: 100%; }
main .form-msg { color: var(--fg-2); }

/* footer */
footer.site { border-top: 1px solid var(--rule); padding: 2.2rem 0 3rem; font-size: 0.88rem; color: var(--fg-2); }
footer.site .motto { font-weight: 750; font-size: 1rem; color: var(--fg); margin-bottom: 0.8rem; }
footer.site nav { margin-bottom: 0.8rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }
footer.site nav a { color: var(--fg-2); }