* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ledger); color: var(--ink); font-family: 'Public Sans', system-ui, -apple-system, sans-serif; }
body { font-size: 17px; line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }

/* ---------- Hero ---------- */
.hero {
  background: var(--ink);
  color: var(--on-ink);
  padding: 5.5rem 1.75rem 5rem;
}
.hero__inner { max-width: 760px; margin: 0 auto; }
.hero__brand { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.4rem; }
.hero__icon { display: block; flex: none; }
.hero__brand .hero__kicker { margin: 0; }
.hero__kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  margin: 0 0 1.4rem;
}
.hero h1 {
  font-family: 'Bitter', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
  max-width: 14ch;
}
.hero__sub {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--on-ink-dim);
  max-width: 46ch;
  margin: 0 0 3rem;
  text-wrap: balance;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Hero docket — the large, animated version of the product's signature device. Entrance animation
   is decorative only — never gates primary text, which renders immediately regardless. */
.hero-docket { position: relative; height: 70px; margin: 0 0 0.5rem; }
.hd__line { position: absolute; top: 10px; left: 0; right: 0; height: 1px; background: var(--on-ink-rule); }
.hd__fill {
  position: absolute; top: 10px; left: 0; height: 1px; background: var(--ink-blue);
  width: 0%; animation: fillLine 1.4s ease-out 0.9s forwards;
}
@keyframes fillLine { to { width: 78%; } }
.hd__point {
  position: absolute; top: 4px; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--ink-blue); background: var(--ink); transform: translateX(-50%) scale(0);
  animation: pop 0.35s ease-out forwards;
}
.hd__point--fired { background: var(--ink-blue); }
.hd__point--today { border-color: var(--deadline-red); background: var(--deadline-red); }
@keyframes pop { to { transform: translateX(-50%) scale(1); } }
.hd__label {
  position: absolute; top: 28px; transform: translateX(-50%);
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--on-ink-dim); white-space: nowrap;
}
.hd__label--today { color: var(--deadline-red); font-weight: 600; }

.hero__foot { font-size: 0.92rem; color: var(--on-ink-dim); margin-top: 2.75rem; max-width: 50ch; }
.hero__foot strong { color: var(--on-ink); font-weight: 600; }

/* ---------- Body ---------- */
.page { max-width: 760px; margin: 0 auto; padding: 5rem 1.75rem 6rem; }
.section { padding-top: 2.5rem; border-top: 1px solid var(--rule); margin-top: 2.5rem; }
.section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-blue); margin: 0 0 0.6rem;
}
.section h2 { font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 1.9rem; line-height: 1.25; margin: 0 0 1.1rem; text-wrap: balance; max-width: 20ch; }
.section > p.lead { font-size: 1.08rem; max-width: 58ch; color: var(--ink); margin: 0 0 1.5rem; }

.stakes { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.5rem; }
.stakes__row { display: flex; gap: 1rem; align-items: baseline; max-width: 58ch; }
.stakes__row::before { content: "—"; color: var(--deadline-red); font-weight: 600; flex: none; }
.stakes__row p { margin: 0; color: var(--graphite); }
.stakes__row strong { color: var(--ink); }

.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; margin-top: 2rem; }
@media (max-width: 620px) { .benefits { grid-template-columns: 1fr; } }
.benefit__num { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--ink-blue); display: block; margin-bottom: 0.5rem; }
.benefit h3 { font-size: 1.08rem; font-weight: 600; margin: 0 0 0.4rem; }
.benefit p { margin: 0; color: var(--graphite); font-size: 0.95rem; max-width: 38ch; }

.diff {
  background: var(--ink);
  color: var(--on-ink);
  border-radius: 4px;
  padding: 2.5rem 2.25rem;
  margin: 2.5rem 0 0.5rem;
}
.diff .eyebrow { color: var(--on-ink-dim); }
.diff h2 { color: var(--on-ink); max-width: 22ch; }
.diff p { color: var(--on-ink-dim); max-width: 56ch; margin: 0 0 1rem; font-size: 1.02rem; }
.diff p:last-child { margin-bottom: 0; }
.diff strong { color: var(--on-ink); }

.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.75rem 0 0; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem; padding: 0.35rem 0.7rem; border-radius: 4px; border: 1px solid var(--rule); background: var(--sheet); }
.chip__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chip--settled .chip__dot { background: var(--settled-green); }
.chip--amber .chip__dot { background: var(--notice-amber); }
.chip--red .chip__dot { background: var(--deadline-red); }
.chip--violet .chip__dot { background: var(--negotiation-violet); }

.closing { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.closing h2 { font-family: 'Bitter', Georgia, serif; font-size: 1.7rem; max-width: 22ch; margin: 0 0 1rem; text-wrap: balance; }
.closing p { max-width: 54ch; color: var(--graphite); font-size: 1.02rem; margin: 0; }

.back-link { display: inline-block; margin-top: 3rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--ink-blue); text-decoration: none; }
.back-link:hover, .back-link:focus-visible { text-decoration: underline; }
footer { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--graphite); }

@media (max-width: 520px) {
  .hero { padding: 4rem 1.25rem 3.5rem; }
  .page { padding: 3.5rem 1.25rem 4rem; }
  .section h2, .diff h2, .closing h2 { font-size: 1.5rem; }
  .hd__label { font-size: 0.6rem; }
}