main{ display:flex; flex-direction:column; gap:96px; padding-block:40px 0; }

h1{
  font-size:clamp(2.1rem,5.2vw,3.5rem); line-height:1.08; font-weight:800;
  letter-spacing:-.025em; margin:0 0 20px; max-width:16ch; text-wrap:balance;
}
h2{ font-size:clamp(1.4rem,3vw,1.9rem); line-height:1.2; font-weight:800; letter-spacing:-.015em; margin:0 0 10px; text-wrap:balance; }
.lede{ font-size:clamp(1.05rem,2vw,1.2rem); color:var(--muted); max-width:56ch; margin:0 0 18px; }
.avail{ margin:0; font-weight:700; }
.sub{ color:var(--muted); max-width:60ch; margin:0 0 28px; }

/* chain demo */
.status{
  display:inline-block; font-size:14.5px; font-weight:700;
  padding:8px 14px; border-radius:10px; margin-bottom:26px;
  color:var(--ok); background:var(--ok-bg);
}
.status.bad{ color:var(--bad); background:var(--bad-bg); }

.entries{ list-style:none; margin:0; padding:0; max-width:720px; }
.entry{ position:relative; display:grid; grid-template-columns:28px 1fr; gap:0 14px; padding-bottom:28px; }
.entry:last-child{ padding-bottom:0; }
.entry::before{
  content:''; position:absolute; left:6px; top:20px; bottom:-2px; width:2px; background:var(--border);
}
.entry:last-child::before{ display:none; }
.node{
  width:14px; height:14px; border-radius:50%; margin-top:6px;
  background:var(--ok); box-shadow:0 0 0 4px var(--bg);
  position:relative; z-index:1;
}
.entry.bad .node{ background:var(--bad); }
.meta{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13px; color:var(--muted); }
.meta .when{ font-family:'JetBrains Mono',ui-monospace,monospace; }
.meta .label{ font-weight:700; color:var(--text); }
.note{ margin:4px 0 8px; font-size:17px; font-weight:700; line-height:1.4; }
.note-input{
  display:block; width:100%; margin:4px 0 8px; padding:8px 12px;
  font:700 17px/1.4 'Manrope',sans-serif; color:var(--text);
  background:var(--card); border:1px solid var(--accent); border-radius:10px;
}
.hashes{ display:flex; flex-wrap:wrap; gap:2px 18px; font-size:13px; color:var(--muted); }
.hashes code{ color:var(--text); }
.entry.bad .hashes .now code{ color:var(--bad); }
.hashes .state{ font-weight:700; color:var(--ok); }
.entry.bad .hashes .state{ color:var(--bad); }
.demo-actions{ margin:26px 0 0 42px; }
button.link{
  font:700 14px 'Manrope',sans-serif; color:var(--link); background:none; border:0; padding:4px 0; cursor:pointer;
}
button.link:hover{ text-decoration:underline; }
.fine{ color:var(--muted); font-size:14px; max-width:62ch; margin:20px 0 0 42px; }

/* screens */
.shots{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:28px 0 0; padding:0; list-style:none; }
.shots figure{ margin:0; }
.shots img{ display:block; width:100%; border-radius:22px; border:1px solid var(--border); }
.shots figcaption{ margin-top:12px; font-size:14.5px; color:var(--muted); }
.shots figcaption strong{ color:var(--text); display:block; font-weight:700; }
.note-small{ color:var(--muted); font-size:14px; margin:16px 0 0; }

/* features */
.features{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 48px; margin:28px 0 0; }
.features div{ border-top:1px solid var(--border); padding-top:14px; }
.features dt{ font-weight:800; margin:0 0 4px; }
.features dd{ margin:0; color:var(--muted); font-size:15.5px; max-width:46ch; }

.price p{ margin:0 0 10px; max-width:60ch; }
.price .big{ font-size:clamp(1.2rem,2.6vw,1.5rem); font-weight:800; letter-spacing:-.01em; }
.price .muted{ color:var(--muted); }

@media (max-width:720px){
  main{ gap:72px; }
  .shots{ grid-template-columns:1fr; max-width:320px; }
  .features{ grid-template-columns:1fr; }
  .demo-actions, .fine{ margin-left:0; }
}