/* ══════════════════════════════════════════════════════════════════
   PONZI — staking page.
   Extends the homepage sheet; defines nothing it already defines.
   Every colour, font and rhythm value here is a token from base.css
   or style.css — this file adds two components (the comparison and
   the register) and the shell they sit in, and nothing else.
   ══════════════════════════════════════════════════════════════════ */

.sk-open,
.sk-sec{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.sk-open{ padding-block:clamp(6rem,13vw,10rem) clamp(2.5rem,5vw,4rem) }
.sk-sec{ padding-block:var(--sec) }

/* the alternate ground is the raised ink, not a card: full-bleed band
   with the content still on the page grid inside it */
.sk-sec--alt{
  max-width:none;
  background:var(--ink-2);
  border-block:1px solid var(--hair);
}
.sk-sec--alt > *{
  max-width:var(--maxw);
  margin-inline:auto;
}

.sk-h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.6rem,6.6vw,5.4rem); line-height:1.02;
  letter-spacing:-.015em; margin:0;
}
.sk-lede{
  margin:1.6rem 0 0; max-width:54ch;
  font-size:clamp(1.05rem,1.7vw,1.25rem); line-height:1.55; color:var(--bone-2);
}
.sk-fine{
  margin:1.5rem 0 0; font-family:var(--mono); font-size:.78rem;
  letter-spacing:.04em; line-height:1.7; color:var(--bone-3);
}

.sk-sec h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:1.08;
  letter-spacing:-.01em; margin:0;
}

/* the three-up steps need no new rules — .steps carries them — but on
   this page they follow an h2 rather than opening the section */
.sk-steps{ margin-top:2.5rem }
.sk-terms{ margin-top:2.8rem }

/* ══════════════════════ § 02 · THE COMPARISON ══════════════════════
   Two figures, one bar component, no legend. The argument is entirely
   in the silhouette: the old one narrows to a point and the new one
   does not narrow at all, so the difference survives being seen from
   across a room and does not depend on reading either caption. */
.sk-compare{
  margin-top:2.8rem;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);
}
.sk-fig{ margin:0 }

.sk-fig-cap{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; padding-bottom:.8rem; margin-bottom:1.2rem;
  border-bottom:1px solid var(--hair);
}
.sk-fig-cap--old{ color:var(--red) }
.sk-fig-cap--new{ color:var(--gold) }

.sk-bars{ display:grid; gap:6px }
.sk-bars span{
  display:block; height:clamp(13px,2vw,20px);
  width:var(--w); min-width:8px; margin-inline:auto;
  border-radius:2px;
}
/* the dead instrument: red, and it comes to a point */
.sk-bars--old span{ background:rgb(255 77 61 / .62) }
.sk-bars--old span:last-child{ background:rgb(255 77 61 / .92) }
/* the live one: gold, and it does not */
.sk-bars--new span{ background:rgb(224 184 73 / .88) }

.sk-fig-note{
  margin:1.2rem 0 0; font-size:.95rem; line-height:1.5; color:var(--bone-3);
  max-width:42ch;
}

.sk-aside{
  margin:2.8rem 0 0; max-width:56ch;
  font-size:1.02rem; line-height:1.6; color:var(--bone-2);
  border-inline-start:2px solid var(--gold); padding-inline-start:1.1rem;
}

/* ══════════════════════ § 03 · THE RECORD ══════════════════════
   Ships empty and ships published. The column head is decorative until
   there are rows under it, so it is aria-hidden in the markup and
   collapses entirely on small screens, where the empty state is
   carrying the whole message on its own. */
.sk-rec{
  margin-top:2.6rem;
  border:1px solid var(--hair-2); border-radius:var(--r-chip);
}
.sk-rec-head{
  display:grid; grid-template-columns:1.1fr 1fr 1fr .8fr 1fr; gap:1rem;
  padding:.8rem 1.1rem; border-bottom:1px solid var(--hair);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bone-3);
}
.sk-rec-empty{
  margin:0 auto; padding:clamp(1.8rem,5vw,3.2rem) 1.2rem;
  max-width:56ch; text-align:center; color:var(--bone-2);
  font-size:1rem; line-height:1.55;
}
.sk-rec-empty b{
  display:block; color:var(--bone); font-weight:600; margin-bottom:.45rem;
  font-size:1.08rem;
}
.sk-figs{ margin-top:2.6rem }

/* ══════════════════════ § 04 · THE Q&A ══════════════════════ */
.sk-qa{
  margin-top:2.8rem;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:0 clamp(1.5rem,4vw,3.5rem);
  border-top:1px solid var(--hair);
}
.sk-qa > div{ padding:2rem 0 2.2rem; border-bottom:1px solid var(--hair) }
.sk-qa h3{
  margin:0 0 .9rem; font-size:1.12rem; font-weight:600; line-height:1.3;
}
.sk-qa p{ margin:0; color:var(--bone-2); line-height:1.6; max-width:46ch }

.sk-cta{ margin-top:3rem }

/* ── narrow ────────────────────────────────────────────────────────
   The comparison is the one thing that must NOT stack silently: side
   by side is the entire point, so it keeps two columns down to the
   smallest width and only the bar height relaxes. */
@media (max-width:820px){
  .sk-qa{ grid-template-columns:1fr }
  .sk-qa > div{ padding:1.6rem 0 1.8rem }
  .sk-rec-head{ display:none }
  .sk-compare{ gap:1.1rem }
  .sk-fig-note{ font-size:.88rem }
}
@media (max-width:560px){
  .sk-fig-cap{ font-size:.62rem; letter-spacing:.06em }
  .sk-bars span{ height:10px }
}