/* demos page: sheets D-000 to D-105 */
.demos-page{background:var(--navy)}
.nav-links a[aria-current=page]{color:#fff;box-shadow:0 2px 0 var(--red)}
.d-hero{position:relative;overflow:hidden;padding:clamp(120px,16vw,180px) 0 clamp(56px,8vw,96px);border-bottom:1px solid rgba(255,255,255,.1)}
.d-hero .grid{opacity:.7}
.d-hero-in{position:relative}
.d-lede{max-width:640px;margin-top:22px;font-size:clamp(17px,1.6vw,20px);color:#d6dbea}
.d-lede.dark{color:var(--mute-d)}
.d-by{margin-top:28px;font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.d-jump{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:34px;max-width:980px}
.d-jump a{display:flex;flex-direction:column;gap:6px;min-height:64px;padding:12px 14px;border:1px solid rgba(255,255,255,.18);text-decoration:none;font-weight:600;font-size:15px;background:rgba(15,22,49,.6)}
.d-jump a:hover,.d-jump a:focus-visible{border-color:var(--red)}
.d-jump b{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--red)}
.d-sheet{padding:clamp(56px,8vw,104px) 0;border-bottom:1px solid rgba(255,255,255,.1)}
.d-sheet:nth-of-type(odd){background:var(--navy-2)}
.d-h2{font-size:clamp(32px,5vw,64px);text-transform:uppercase}
.d-why{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px);margin:24px 0 30px;max-width:1100px}
.d-why p{color:#d6dbea}
.d-why b{display:block;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.mock{background:var(--paper);color:var(--ink);padding:clamp(14px,2.6vw,30px);border-radius:4px;max-width:1100px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);min-width:0;overflow:hidden}
.mock-loading{font:500 13px/1 var(--mono);color:var(--mute-d)}
.d-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:30px;max-width:1100px}
.d-cards article{border:1px solid rgba(255,255,255,.16);padding:20px;background:rgba(15,22,49,.5)}
.d-cards h3{font-size:22px;text-transform:uppercase;margin-bottom:10px}
.d-cards p{color:#c9cfe0;font-size:16px}
.d-next{background:var(--paper)!important;color:var(--ink)}
.d-next .d-h2{max-width:900px}
.d-next .btn{margin-top:26px}
@media (max-width:700px){
  .d-why{grid-template-columns:1fr}
  .d-jump{grid-template-columns:1fr 1fr}
}