/* Pulse — shared styles. A deep petrol-green canvas, serif display / Inter
   body, heartbeat coral. Green rather than black on purpose: near-black plus
   one vivid accent is the current default look, and coral reads hotter against
   green than it ever did against black. "Ink" is the TEXT colour (light here)
   and "bg" the canvas, so every var-first component recolours for free.
   Contrast receipts: ink on bg 13.6:1, dim 5.6:1, accent-ink on accent 5.9:1. */
:root{
  --bg:#0d211c; --panel:#132b25; --panel2:#19352d; --line:#25443b; --line2:#35594e;
  --ink:#eef5f1; --dim:#9ab3aa; --faint:#688a7e;
  --accent:#ff5a3c; --accent-ink:#2b0d06; --accent-soft:#2a1a14;
  --amber:#f5a623; --amber-soft:#2f2a17;
  --red:#ff8a76; --red-soft:#301a16;
  --green:#4fc98a;
  --font-d:"Inter Variable","Inter",ui-sans-serif,system-ui,sans-serif;
  --font-s:"Instrument Serif",Georgia,serif;
  --font-m:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 var(--font-d);
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
::selection{background:var(--accent);color:#0d211c}
.wrap{max-width:1020px;margin:0 auto;padding:0 22px;width:100%}
code,.mono{font-family:var(--font-m);font-size:.9em}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line2);
  text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}

/* nav */
nav{position:sticky;top:0;z-index:60;background:rgba(13,33,28,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:28px;height:60px}
.logo{display:flex;align-items:center;gap:9px;font:400 21px var(--font-s);
  color:var(--ink);margin-right:auto;text-decoration:none}
.logo svg{display:block}
nav a.nl{color:var(--dim);font-size:14px;font-weight:500;text-decoration:none}
nav a.nl:hover{color:var(--ink)}
nav a.nl.here{color:var(--ink);font-weight:600}
.wallet-chip{padding:8px 16px;border-radius:99px;border:1px solid var(--ink);
  background:var(--ink);color:var(--bg);font:600 13px var(--font-d);cursor:pointer;
  text-decoration:none;transition:background .15s,color .15s}
.wallet-chip:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.wallet-chip.connected{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
  font-family:var(--font-m)}
@media(max-width:760px){nav a.nl{display:none}}

/* page headers */
.page-head{padding:58px 0 6px}
.sec-tag{font:600 11px var(--font-m);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:14px}
h1.page{font:400 clamp(34px,4.8vw,50px)/1.1 var(--font-s);letter-spacing:-.01em;margin:0 0 12px}
h2{font:400 clamp(26px,3.2vw,34px)/1.15 var(--font-s);margin:0 0 10px}
h3{font:600 16px var(--font-d);margin:32px 0 10px}
.sub{color:var(--dim);margin:0 0 28px;font-size:15.5px;max-width:640px}
section{padding:42px 0 8px}
em,.serif-i{font-family:var(--font-s);font-style:italic}

/* hero — faint drafting grid behind it, same texture the OG card uses */
header.hero{padding:84px 0 56px;text-align:center;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 59px,#173028 59px 60px),
    repeating-linear-gradient(90deg,transparent 0 59px,#173028 59px 60px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 11px var(--font-m);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  border:1px solid var(--line2);background:var(--panel);
  padding:7px 15px;border-radius:99px;margin-bottom:30px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  outline:3px solid var(--accent-soft)}
h1.hero{font:400 clamp(42px,7vw,76px)/1.05 var(--font-s);letter-spacing:-.01em;margin:0 0 22px}
h1.hero .accent{font-style:italic;background:linear-gradient(transparent 62%,var(--accent) 62%,var(--accent) 92%,transparent 92%)}
.lede{color:var(--dim);font-size:17.5px;max-width:600px;margin:0 auto 34px;line-height:1.7}
.lede b{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:99px;
  font:600 15px var(--font-d);cursor:pointer;text-decoration:none;transition:all .15s;
  border:1px solid var(--ink)}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--panel)}

/* pulse divider — the one piece of brand decoration, now in the brand coral and
   beating. Needs pathLength="100" on the path so the dash maths is unit-free. */
.pulse-line{display:block;width:100%;max-width:420px;margin:0 auto 8px;color:var(--accent)}
.pulse-line path{stroke-dasharray:100;stroke-dashoffset:100;
  animation:pulse-draw 3.2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes pulse-draw{
  0%{stroke-dashoffset:100;opacity:0}
  8%{opacity:1}
  45%{stroke-dashoffset:0;opacity:1}
  78%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:-14;opacity:0}
}
@media(prefers-reduced-motion:reduce){.pulse-line path{animation:none;stroke-dashoffset:0}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:6px 0 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}
.stat-v{font:400 34px/1.05 var(--font-s)}
.stat-l{font:600 10.5px var(--font-m);text-transform:uppercase;letter-spacing:.12em;
  color:var(--faint);margin-top:8px}

/* coin cards — grid of square art, after the pons launchpad layout */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:16px}
a.card{display:block;text-decoration:none;color:inherit;background:var(--panel);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:transform .16s,border-color .16s,box-shadow .16s}
a.card:hover{transform:translateY(-3px);border-color:var(--line2);
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
a.card:hover .card-art{transform:scale(1.03)}
.card-media{position:relative;aspect-ratio:1;overflow:hidden;background:var(--panel2)}
.card-art{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.card-art.fallback{display:grid;place-items:center;font:400 64px var(--font-s);
  background:linear-gradient(140deg,#33201a,#183029);color:#ff8a72}
/* Badges: solid pills, white text. Contrast checked against white (all >= 4.4:1)
   so a badge reads identically inline and sitting on a coin's artwork. */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;
  font:700 11px var(--font-m);letter-spacing:.05em;color:#fff;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 3px rgba(255,255,255,.22)}
/* Official is the brand coral, deliberately not one of the semantic colours —
   it answers "is this ours", not "is this safe", and must never read as a
   stronger version of PERMANENT. Dark text: white on this coral is only 3.1:1. */
.b-official{background:var(--accent);color:var(--accent-ink)}
.b-perm{background:#2b8a3e}
.b-revoc{background:#a8690a}
.b-none{background:#c0392b}

/* On artwork the pill needs separating from whatever sits behind it, so it gets a
   thin light ring and a soft shadow rather than a different colour. */
.card-badge{position:absolute;top:10px;left:10px;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.55), 0 2px 10px rgba(0,0,0,.3)}
/* Opposite corner from the status badge so the two never collide on a card. */
.card-badge.official{left:auto;right:10px}
.card-body{padding:14px 16px 16px}
.card-name{font-weight:600;font-size:15.5px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-sym{font:600 12px var(--font-m);color:var(--dim);margin-top:2px}
.card-mc{font:400 26px/1.1 var(--font-s);margin-top:10px}
.card-mc small{font:600 11px var(--font-m);color:var(--faint);letter-spacing:.06em;
  text-transform:uppercase}
.grid>p{grid-column:1/-1}   /* loading and empty states span the row */
.card-foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line);font:600 11px var(--font-m);color:var(--faint)}

/* panels / forms */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row>div{flex:1;min-width:170px}
label{display:block;font:600 10.5px var(--font-m);text-transform:uppercase;
  letter-spacing:.1em;color:var(--dim);margin-bottom:7px}
input,textarea{width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--ink);font:14px var(--font-m);transition:border-color .15s}
input:focus,textarea:focus{outline:none;border-color:var(--ink)}
input.plain,textarea{font-family:var(--font-d)}
textarea{resize:vertical;min-height:66px}
button.act{padding:12px 24px;border-radius:99px;border:1px solid var(--ink);cursor:pointer;
  background:var(--ink);color:var(--bg);font:600 14px var(--font-d);white-space:nowrap;
  transition:all .15s}
button.act:hover:not(:disabled){background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button.act:disabled{opacity:.35;cursor:not-allowed}
button.act.ghost{background:transparent;color:var(--ink)}
button.act.ghost:hover:not(:disabled){background:var(--panel2)}

.status{margin-top:14px;font-size:13.5px;padding:12px 15px;border-radius:11px;display:none;
  font-family:var(--font-m);word-break:break-word}
.status.on{display:block}
.status.info{background:#132430;color:#8fc6de;border:1px solid #1e3a48}
/* Success feedback is green, not brand. Under the lime brand the two could share a
   colour; a coral "ok" would read as an error, so they part ways here. */
.status.ok{background:#0f2a1f;color:#6fd79b;border:1px solid #1c4433}
.status.err{background:var(--red-soft);color:var(--red);border:1px solid #4a221c}
.note{color:var(--dim);font-size:13.5px}

/* option cards */
.options{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:860px){.options{grid-template-columns:1fr}}
.option{border-radius:18px;padding:26px;background:var(--panel);border:1px solid var(--line)}
.option.a{border-color:#7a3a2b;box-shadow:0 0 0 1px #7a3a2b inset}
.option.b{border-color:#4a3f28}
.option h3{margin:0 0 4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.option .opt-sub{color:var(--dim);font-size:14px;margin:8px 0 18px;line-height:1.65}

/* steps */
.steps{display:grid;gap:0;counter-reset:s}
.step{position:relative;padding:4px 0 30px 62px}
.step::before{counter-increment:s;content:counter(s);
  position:absolute;left:0;top:2px;font:400 19px var(--font-s);color:var(--accent-ink);
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent)}
.step:not(:last-child)::after{content:"";position:absolute;left:20px;top:48px;bottom:4px;
  width:1px;background:var(--line2)}
.step b{display:block;font-size:16px;margin-bottom:5px}
.step p{margin:0;color:var(--dim);font-size:14.5px;max-width:620px}

/* table + callouts */
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
th{font:600 10.5px var(--font-m);text-transform:uppercase;letter-spacing:.11em;
  color:var(--faint);background:var(--panel2)}
td:first-child{color:var(--dim);font-weight:500}
.yes{color:var(--green)} .no{color:var(--red)}

.callout{border:1px solid var(--line);padding:16px 20px;background:var(--panel);
  border-radius:14px;font-size:14.5px;margin:12px 0;color:var(--dim)}
.callout b{color:var(--ink)}
.callout{border-left:3px solid var(--amber)}
.callout.red{border-left-color:var(--red)}
.callout.grey{border-left-color:var(--line2)}

/* value props (home) */
.props{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.prop{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}
.prop .ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);margin-bottom:14px;font-size:17px}
.prop b{display:block;font-size:15.5px;margin-bottom:6px}
.prop p{margin:0;color:var(--dim);font-size:13.5px}

details.src{margin-top:16px}
details.src summary{cursor:pointer;color:var(--faint);font:600 11px var(--font-m);
  letter-spacing:.08em;text-transform:uppercase}

.more-link{display:inline-block;font-weight:600;font-size:14px;margin-top:8px}
footer{padding:34px 0 56px;color:var(--faint);font-size:13px;border-top:1px solid var(--line);
  margin-top:72px}
footer .cols{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
footer .mono{font-size:12px}

/* A light island: inline SVG diagrams drawn with paper-era colours sit on
   actual paper instead of being repainted attribute by attribute. */
.paper{background:#fdfcf9;border:1px solid #e3e0d5;border-radius:16px;padding:18px}

/* compact stat line (coin page) — replaces the wall of stat cards */
.statline{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline;
  font:500 12.5px var(--font-m);color:var(--faint);letter-spacing:.02em}
.statline .sl b{font:400 19px var(--font-s);color:var(--ink);margin-right:4px}

/* two-up panels */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:860px){.duo{grid-template-columns:1fr}}

/* collapsible boxes for secondary content */
details.box{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:14px 20px;margin-top:14px}
details.box summary{cursor:pointer;font:600 13px var(--font-d);color:var(--dim)}
details.box summary:hover{color:var(--ink)}
details.box[open] summary{color:var(--ink);margin-bottom:2px}

/* the pulse button breathes when the gates are open */
button.act.ready{animation:btn-beat 1.6s ease-in-out infinite;
  background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@keyframes btn-beat{
  0%,100%{box-shadow:0 0 0 0 rgba(255,90,60,.45)}
  50%{box-shadow:0 0 0 9px rgba(255,90,60,0)}
}
@media(prefers-reduced-motion:reduce){button.act.ready{animation:none}}

/* generation chip on the props */
.gen2{font:700 9px var(--font-m);letter-spacing:.1em;color:var(--accent-ink);
  background:var(--accent);border-radius:99px;padding:2px 7px;vertical-align:2px;margin-left:6px}

/* ── home: the monitor ─────────────────────────────────────────
   Left-aligned hero, a continuously-running EKG, and a live feed of real
   pulses. Nothing here shares a silhouette with the old centered layout. */
.hero2{padding:92px 0 10px;max-width:720px}
.live-tag{display:flex;align-items:center;gap:9px;font:600 11px var(--font-m);
  letter-spacing:.16em;color:var(--dim);margin-bottom:26px}
.blink{width:8px;height:8px;border-radius:50%;background:var(--accent);
  animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.hero2 h1{font:400 clamp(46px,7.4vw,84px)/1.02 var(--font-s);letter-spacing:-.01em;margin:0 0 24px}
.hbeat{color:var(--accent);font-style:italic;white-space:nowrap}
.hbeat-dot{display:inline-block;width:.16em;height:.16em;border-radius:50%;
  background:var(--accent);margin-left:.08em;animation:blink 1.6s ease-in-out infinite}
.lede2{color:var(--dim);font-size:17.5px;max-width:600px;line-height:1.7;margin:0}
.lede2 b{color:var(--ink);font-weight:600}

.ekg{margin:44px 0 8px;height:64px}
.ekg svg{width:100%;height:100%;display:block}
.ekg path{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ekg-track{stroke:#28483e}
.ekg-beam{stroke:var(--accent);stroke-dasharray:110 1090;
  animation:ekg-run 5s linear infinite;filter:drop-shadow(0 0 6px rgba(255,90,60,.55))}
@keyframes ekg-run{from{stroke-dashoffset:1200}to{stroke-dashoffset:-1200}}
@media(prefers-reduced-motion:reduce){.ekg-beam{animation:none;stroke-dasharray:none}
  .blink,.hbeat-dot{animation:none}}

.monitor{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--line);border-radius:16px;
  background:var(--panel);padding:6px 0;margin-top:26px}
.m-cell{flex:1;min-width:150px;text-align:center;padding:14px 18px;
  font:500 12px var(--font-m);color:var(--faint);letter-spacing:.03em;
  border-right:1px solid var(--line)}
.m-cell:last-child{border-right:none}
.m-cell b{display:block;font:400 26px/1.2 var(--font-s);color:var(--ink);margin-bottom:3px}

.beat{display:flex;align-items:baseline;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.beat:last-child{border-bottom:none}
.beat .b-sym{font-weight:600;color:var(--ink);text-decoration:none}
.beat .b-sym:hover{color:var(--accent)}
.beat .b-amt{font:600 12.5px var(--font-m);color:var(--green)}
.beat .b-ago{margin-left:auto;font:500 12px var(--font-m);color:var(--faint)}
.beat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  align-self:center;flex-shrink:0}