/* ============================================================================
   pp.vervdao.org — Programmable Promise
   Hand-authored. No build step, no framework, zero external requests.

   This page is a sibling of vervdao.org and vervdao.org/book/, and it borrows
   their design language wholesale: paper white, ink black, one copper accent,
   General Sans, hairline rules, and a "plate" per section. Nothing is coloured
   for decoration. Readability comes first — 17px body on white at #4A4A4A or
   darker, a 62ch measure, and whitespace instead of boxes.

   The only addition to the house palette is IBM Plex Mono, which is not
   decorative: it marks the values a machine — not a reader — is the authority
   on (hashes, opcodes, DIDs, file extensions, policy names).
   ========================================================================== */

/* ===== fonts ===== */
@font-face{font-family:'General Sans';src:url('/assets/fonts/gs-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'General Sans';src:url('/assets/fonts/gs-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'General Sans';src:url('/assets/fonts/gs-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'General Sans';src:url('/assets/fonts/gs-700.woff2') format('woff2');font-weight:700;font-display:swap}
/* Newsreader italic — the same two faces vervdao.org uses for its editorial
   accents, copied from that repo so this page carries the identical voice. */
@font-face{font-family:'Newsreader';src:url('/assets/fonts/nr-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/assets/fonts/nr-500i.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/assets/fonts/plex-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/assets/fonts/plex-mono-500.woff2') format('woff2');font-weight:500;font-display:swap}

/* ===== tokens (same values as vervdao.org — do not drift) ===== */
:root{
  color-scheme:light;
  --paper:#FFFFFF; --ink:#1A1A1A; --ink-2:#4A4A4A; --muted:#6B6B6B;
  --hair:#C9C9C9; --control-border:#8C8C8C;
  --copper:#B45309; --copper-fill:#F6E7DA; --copper-text:#8A4106;
  --err:#B3261E;
  --sans:'General Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:'Newsreader',Georgia,serif;
  --pad:clamp(20px,5vw,72px); --measure:62ch; --maxw:1080px;
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--copper-fill);color:var(--ink)}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
img,svg{display:block}
code{font-family:var(--mono);font-size:.88em}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5em 1em;z-index:20}
.skip:focus{left:0}

/* ===== topbar ===== */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:14px var(--pad);border-bottom:1px solid var(--hair);position:sticky;top:0;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);z-index:10}
.brand{display:flex;align-items:center;gap:.5em;font-weight:600;letter-spacing:.01em}
.brand img{width:20px;height:auto;flex:0 0 auto}
.brand-verv{letter-spacing:.06em}
.brand-sep{color:var(--hair);font-weight:400}
.brand-name{font-weight:500;color:var(--ink-2)}
.top-nav{display:flex;align-items:center;gap:1.3em}
.top-link{font-size:.85rem;color:var(--muted);white-space:nowrap}
.top-link:hover{color:var(--ink)}
.top-join{font-size:.82rem;font-weight:600;color:var(--copper);border-bottom:1px solid var(--copper-fill);padding-bottom:2px;white-space:nowrap}
.top-join:hover{border-bottom-color:var(--copper)}
.top-join .cta-sm{display:none}

/* ===== buttons ===== */
.btn{display:inline-block;padding:.85em 1.6em;font-family:inherit;font-weight:600;font-size:.95rem;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:background .2s ease,color .2s ease}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--copper)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:none}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* ===== plate (= one section) ===== */
.plate{scroll-margin-top:4.5rem;max-width:var(--maxw);margin-inline:auto;padding:clamp(52px,8vh,104px) var(--pad);border-top:1px solid var(--hair)}
.plate:first-child{border-top:0}
.plate-head{display:flex;justify-content:space-between;align-items:baseline;gap:1em;margin-bottom:1.5rem}
.plate-num{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ref{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.plate-title{font-weight:700;font-size:clamp(1.6rem,3.2vw,2.35rem);line-height:1.14;letter-spacing:-.025em;max-width:22ch}
.plate-body{max-width:var(--measure);margin-top:1.1rem;color:var(--ink-2);font-size:1.02rem}
.plate-body.lead{font-size:clamp(1.05rem,1.6vw,1.22rem)}
.plate-close{max-width:var(--measure);margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--hair);font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--ink-2)}

/* ===== hero ===== */
.hero{border-top:0;padding-top:clamp(44px,7vh,88px)}
.hero h1{margin-top:1rem;font-weight:700;font-size:clamp(2.1rem,5.4vw,3.7rem);line-height:1.04;letter-spacing:-.035em;max-width:15ch}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--copper)}
.hero-sub{margin-top:1.4rem;max-width:52ch;font-size:clamp(1.05rem,1.5vw,1.24rem);color:var(--ink-2)}
.hero-facts{list-style:none;margin-top:1.6rem;padding-left:1rem;border-left:2px solid var(--copper);display:grid;gap:.45em;max-width:56ch;font-size:1rem;color:var(--ink-2)}
.hero-facts b{color:var(--ink);font-weight:600}
.status{display:inline-flex;align-items:flex-start;gap:.55em;line-height:1.5;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-text);background:var(--copper-fill);padding:.4em .8em;border-radius:3px}
.status i{width:6px;height:6px;margin-top:.5em;border-radius:50%;background:var(--copper);flex:0 0 auto}

/* ===== figures / diagrams (the vervdao.org .dg language) ===== */
.fig{margin:2.4rem 0 0}
.fig-scroll{overflow-x:auto}
.fig .dg{width:100%;height:auto}
.fig-cap{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--hair);max-width:56ch;font-family:var(--serif);font-style:italic;font-size:.94rem;color:var(--ink-2)}
.dg text{font-family:var(--sans);fill:var(--ink)}
.dg .dg-h{font-size:17px;font-weight:600}
.dg .dg-s{font-size:15px;fill:#4A4A4A}
.dg .dg-m{font-family:var(--mono);font-size:14px;fill:#6B6B6B}
.dg .dg-node{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.dg .dg-node-a{fill:#FAFAFA}
.dg .dg-link{stroke:#4A4A4A;stroke-width:2;fill:none;stroke-linecap:round}
.dg .dg-wire{stroke:var(--copper);stroke-width:3;fill:none;stroke-linecap:round}
.dg .dg-rail{stroke:var(--ink);stroke-width:2.5;fill:none}
.dg .dg-hair{stroke:var(--hair);stroke-width:1.5;fill:none}
.dg .dg-seal{fill:var(--copper-fill);stroke:var(--copper);stroke-width:2.5;stroke-linejoin:round}
.dg .dg-seal-spent{fill:none;stroke:#8C8C8C;stroke-width:2;stroke-linejoin:round}
.dg .dg-strike{stroke:#8C8C8C;stroke-width:2;stroke-linecap:round}
.dg .dg-arrowhead{fill:#4A4A4A;stroke:none}
.dg .dg-pip{fill:var(--copper);stroke:none}
.dg .dg-pip-off{fill:none;stroke:var(--control-border);stroke-width:1.5}

/* ===== steps (how it works) ===== */
.steps{list-style:none;padding:0;margin-top:2.6rem;display:grid;gap:0}
.step{display:grid;grid-template-columns:minmax(0,26ch) minmax(0,1fr);gap:clamp(18px,4vw,48px);padding:1.7rem 0;border-top:1px solid var(--hair)}
.step:last-child{border-bottom:1px solid var(--hair)}
.step-n{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);margin-bottom:.45rem}
.step h3{font-weight:700;font-size:clamp(1.15rem,2vw,1.42rem);line-height:1.2;letter-spacing:-.02em}
.step p{color:var(--ink-2);font-size:1rem;max-width:var(--measure)}
.step p+p{margin-top:.7rem}

/* ===== cells (what it does) ===== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);margin-top:2.6rem}
.cell{padding-top:1rem;border-top:2px solid var(--ink)}
.cell h3{font-size:1.06rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.5rem}
.cell p{font-size:.96rem;color:var(--ink-2)}

/* ===== privacy ledger ===== */
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:2.6rem}
.ledger-h{display:flex;align-items:center;justify-content:space-between;gap:1em;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding-bottom:.6rem;border-bottom:2px solid var(--ink);margin-bottom:1rem}
.ledger-h.is-private{border-bottom-color:var(--hair);color:var(--muted)}
.pill{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;padding:.2em .5em;border-radius:3px;text-transform:uppercase}
.pill.public{background:var(--copper-fill);color:var(--copper-text)}
.pill.private{background:#F2F2F2;color:var(--muted)}
.bytes{font-family:var(--mono);font-size:.82rem;line-height:1.7;overflow-wrap:anywhere;padding:.8em .9em;border:1px solid var(--hair);border-radius:4px;background:#FAFAFA;color:var(--ink-2)}
.bytes .op{color:var(--copper-text);font-weight:500}
.bytes .tagb{color:var(--ink);font-weight:500}
.ledger-note{margin-top:.7rem;font-size:.88rem;color:var(--muted)}
.ticks{list-style:none;padding:0;display:grid;gap:.7rem}
.ticks li{position:relative;padding-left:1.5em;font-size:.98rem;color:var(--ink-2)}
.ticks li::before{content:"—";position:absolute;left:0;color:var(--copper)}
.ticks li b{color:var(--ink);font-weight:600}
.ticks.neg li::before{content:"×";color:var(--muted)}

/* ===== stages ===== */
.stages{list-style:none;padding:0;margin-top:2.6rem;display:grid;gap:0}
.stage{display:grid;grid-template-columns:minmax(0,7ch) minmax(0,1fr);gap:clamp(16px,3vw,40px);padding:1.7rem 0;border-top:1px solid var(--hair)}
.stage:last-child{border-bottom:1px solid var(--hair)}
.stage-n{font-size:1.5rem;font-weight:700;color:var(--hair);letter-spacing:-.02em}
.stage.now .stage-n{color:var(--copper)}
.stage-st{display:block;margin-top:.3rem;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stage.now .stage-st{color:var(--copper-text)}
.stage h3{font-size:1.15rem;font-weight:700;margin-bottom:.35rem;letter-spacing:-.015em}
.stage p{color:var(--ink-2);font-size:.98rem;max-width:var(--measure)}
.stage ul{list-style:none;padding:0;margin-top:.9rem;display:grid;gap:.5rem;max-width:var(--measure)}
.stage li{position:relative;padding-left:1.4em;font-size:.94rem;color:var(--ink-2)}
.stage li::before{content:"—";position:absolute;left:0;color:var(--hair)}
.stage.now li::before{color:var(--copper)}

/* ===== ecosystem ===== */
.eco{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px);margin-top:2.6rem}
.eco>*{padding-top:1rem;border-top:1px solid var(--hair)}
.eco a{display:block}
.eco a:hover{border-top-color:var(--copper)}
.eco .host{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.eco strong{display:block;margin-top:.35rem;font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.eco a:hover strong{color:var(--copper)}
.eco .arw{margin-left:.4em;color:var(--copper);font-weight:400}
.eco .body{display:block;margin-top:.4rem;font-size:.94rem;color:var(--ink-2)}
.eco .soon strong{color:var(--muted)}
.badge{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;vertical-align:middle;margin-left:.5em;padding:.2em .5em;border:1px solid var(--hair);border-radius:3px;color:var(--muted);font-weight:400}

/* ===== support (donation) — after the book page's .support ===== */
.support{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--hair);max-width:var(--measure)}
.support-title{font-size:1.05rem;font-weight:600}
.support-p{margin-top:.9rem;color:var(--ink-2);font-size:.98rem}
.addr-label{margin-top:1.6rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.addr{margin-top:.5rem;display:flex;align-items:center;gap:.7em;flex-wrap:wrap}
.addr code{font-size:.9rem;line-height:1.5;overflow-wrap:anywhere;padding:.5em .7em;border:1px solid var(--hair);border-radius:4px;background:var(--copper-fill);color:var(--ink)}
.addr-copy{font:inherit;font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--ink);background:none;border:1px solid var(--ink);border-radius:4px;padding:.45em .9em;cursor:pointer;transition:background .2s ease,color .2s ease}
.addr-copy:hover{background:var(--ink);color:var(--paper)}
.support-disclaim{margin-top:1.2rem;color:var(--muted);font-size:.92rem}
.how{margin-top:.9rem;border-top:1px solid var(--hair);padding-top:.9rem}
.how summary{cursor:pointer;font-size:.95rem;font-weight:600;list-style:none}
.how summary::-webkit-details-marker{display:none}
.how summary::before{content:'+ ';color:var(--copper);font-weight:700}
.how[open] summary::before{content:'\2013 '}
.how p{margin-top:.7rem;color:var(--ink-2);font-size:.94rem}

/* ===== faq — the .how affordance above, at section scale ===== */
.faq{margin-top:2.4rem;max-width:var(--measure);border-top:1px solid var(--hair)}
.qa{border-bottom:1px solid var(--hair)}
.qa summary{position:relative;cursor:pointer;list-style:none;padding:1rem 0 1rem 1.5em;font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
/* The marker hangs outside the text column so a question that wraps to a second
   line still starts on the same left edge as the first. */
.qa summary::before{content:'+';position:absolute;left:0;top:1rem;color:var(--copper);font-weight:700}
.qa[open] summary::before{content:'\2013'}
.qa summary:hover{color:var(--copper)}
.qa p{margin-bottom:1.15rem;padding-left:1.5em;color:var(--ink-2);font-size:.98rem}

/* ===== waitlist ===== */
.join-plate .plate-title{max-width:24ch}
form.wl{margin-top:2rem;display:grid;gap:.9rem;max-width:560px}
.wl-row{display:flex;gap:10px;flex-wrap:wrap}
.wl-row input[type=email]{
  flex:1 1 15em;min-width:0;font:inherit;color:var(--ink);background:var(--paper);
  border:1px solid var(--control-border);border-radius:4px;padding:.8em .9em}
.wl-row input[type=email]::placeholder{color:var(--muted)}
.wl-row input[type=email]:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px var(--copper-fill)}
.wl-row .btn{flex:0 0 auto}
form.wl[data-state=sending] .btn-primary{opacity:.6;pointer-events:none}
/* The honeypot: off-screen, never display:none — a field the browser will not
   render is a field a bot can still see is being hidden. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl-msg{display:none;align-items:flex-start;gap:.6em;font-size:.95rem;padding:.75em .9em;border:1px solid;border-radius:4px}
.wl-msg svg{flex:0 0 auto;width:17px;height:17px;margin-top:3px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
form.wl[data-state=ok] .wl-ok{display:flex}
form.wl[data-state=error] .wl-err{display:flex}
form.wl[data-state=ok] .wl-row,form.wl[data-state=ok] .wl-note{display:none}
.wl-ok{color:var(--copper-text);border-color:var(--copper);background:var(--copper-fill)}
.wl-err{color:var(--err);border-color:var(--err);background:#FCEDEC}
.wl-note{font-size:.86rem;color:var(--muted);max-width:52ch}

/* ===== footer ===== */
.seal-foot{display:flex;align-items:center;gap:1.4em;flex-wrap:wrap;max-width:var(--maxw);margin-inline:auto;padding:26px var(--pad);border-top:1px solid var(--hair);color:var(--ink-2)}
.seal-foot img{width:17px;height:auto;flex:0 0 auto}
.fmeta{display:flex;gap:1em;flex-wrap:wrap;font-size:.86rem;flex:1;min-width:180px}
.fmeta a:hover{color:var(--copper)}
.flinks{display:flex;gap:1.1em;flex-wrap:wrap;font-size:.86rem;color:var(--muted)}
.flinks a:hover{color:var(--ink)}

/* ===== reveals (opacity only — a document does not bounce) ===== */
.reveal{opacity:0;transition:opacity .5s ease}
.reveal.in{opacity:1}
html:not(.js) .reveal{opacity:1}

/* ===== responsive ===== */
@media (max-width:760px){
  /* below this the figure would render its labels under 11px — let it scroll instead */
  .fig .dg{min-width:560px}
}
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr 1fr}
  .ledger{grid-template-columns:1fr;gap:32px}
  .step{grid-template-columns:1fr;gap:.6rem}
  .eco{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid-3{grid-template-columns:1fr}
  .stage{grid-template-columns:1fr;gap:.5rem}
  .plate-head{flex-direction:column;align-items:flex-start;gap:.3em}
  .topbar .top-link{display:none}
  .topbar{gap:.6em}
  .brand{gap:.4em}
  .brand-name{font-size:.84rem}
  .top-join .cta-lg{display:none}
  .top-join .cta-sm{display:inline}
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important}
}

/* ===== print ===== */
@media print{
  .topbar,.skip,form.wl,.addr-copy{display:none}
  .plate{padding-block:24px}
}