/* Readable, code-native illustrations: no perspective, raster text or blur. */
.hero .value-record { border: 1px solid #517663; border-radius: 8px; overflow: hidden; }
.hero .value-record header { display:flex; align-items:center; gap:.65rem; padding:.75rem 1rem; background:#173c30; color:#e6f3e9; font-size:.8rem; }
.hero .value-record header span:last-child { margin-left:auto; font-family:var(--mono); font-size:.7rem; }
.hero .value-record .change-pair { padding:1rem; }
.hero .value-chain { display:grid; gap:0; list-style:none; padding:0; margin:0; counter-reset:value-step; }
.hero .value-chain li { counter-increment:value-step; display:grid; grid-template-columns:1.6rem 1fr; gap:.2rem .65rem; padding:.7rem 0; border-bottom:1px solid #355448; }
.hero .value-chain li::before { content:counter(value-step,decimal-leading-zero); grid-row:span 2; color:#98ebc2; font:.7rem var(--mono); padding-top:.2rem; }
.hero .value-chain strong { color:#f0f5eb; font-size:.85rem; }
.hero .value-chain li>span { color:#c7d8cf; font-size:.78rem; line-height:1.5; }
.hero .value-context { padding:.7rem .85rem; border-left:2px solid #97ebc1; background:#173c30; color:#d6e9df; font-size:.78rem; line-height:1.55; }
.hero .value-options { display:grid; gap:.65rem; }
.hero .value-options>div { display:grid; grid-template-columns:1fr auto; gap:.3rem .75rem; padding:.85rem; border:1px solid #476956; border-radius:6px; background:#16392d; }
.hero .value-options strong { color:#eff5eb; font-size:.88rem; }
.hero .value-options span { grid-column:1 / -1; color:#c8d8ce; font-size:.78rem; line-height:1.5; }
.hero .value-options b { font:.65rem var(--mono); color:#a6f0ca; align-self:center; }
.hero .value-options .withheld b { color:#f3d591; }
.hero .hero-release { max-width:42rem; margin-top:1.1rem; color:#bed4c9; font-size:.8rem; line-height:1.6; }
@media(max-width:680px) { .hero .value-record header { padding:.65rem; } .hero .value-record .change-pair { padding:.7rem; } }