#demos .construction-proof {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  margin-top: 26px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s ease;
  scroll-margin-top: 110px;
}
#demos .construction-proof:hover { border-color: #007f73; }
#demos .construction-proof:focus-visible { outline: 3px solid #007f73; outline-offset: 5px; }
#demos .construction-proof-visual { position: relative; min-width: 0; display: grid; align-content: center; overflow: hidden; background: #092d29; }
#demos .construction-proof-visual img { display: block; width: 100%; height: auto; }
#demos .construction-proof-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(5,31,26,.72),transparent 43%); pointer-events: none; }
#demos .construction-proof-play { position: absolute; z-index: 1; left: 24px; bottom: 21px; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #b9e9d9; border-radius: 50%; color: #fff; background: #0b3b30; transition: background .2s ease,transform .2s ease; }
#demos .construction-proof:hover .construction-proof-play { background: #007f73; transform: scale(1.06); }
#demos .construction-proof-film { position: absolute; z-index: 1; left: 88px; bottom: 36px; color: #fff; font: 10px/1.6 var(--mono); letter-spacing: .06em; }
#demos .construction-proof-copy { min-width: 0; align-self: center; padding: clamp(25px,3vw,46px); }
#demos .construction-proof-copy > span { color: #007f73; font: 10px/1.6 var(--mono); letter-spacing: .05em; }
#demos .construction-proof-copy h3 { margin: 20px 0 17px; font-size: clamp(27px,2.7vw,39px); line-height: 1.12; letter-spacing: -.045em; }
#demos .construction-proof-copy p { margin: 0; max-width: 43ch; color: var(--muted); font-size: 15px; line-height: 1.75; }
#demos .construction-proof-copy .construction-proof-status { margin-top: 18px; max-width: none; color: #007f73; font: 10px/1.7 var(--mono); letter-spacing: .035em; text-transform: uppercase; }
#demos .construction-proof-copy > div { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 25px; padding-top: 19px; border-top: 1px solid var(--line); font: 10px/1.6 var(--mono); }
#demos .construction-proof-copy b { color: #007f73; font: 28px/1 'Geist',sans-serif; }
@media(max-width:800px) {
  #demos .construction-proof { grid-template-columns: minmax(0,1fr); }
  #demos .construction-proof-copy { padding: 26px; }
  #demos .construction-proof-copy h3 { font-size: 32px; }
}
@media(max-width:450px) {
  #demos .construction-proof-copy { padding: 24px 20px; }
  #demos .construction-proof-copy h3 { font-size: 29px; }
  #demos .construction-proof-play { left: 17px; bottom: 14px; width: 44px; height: 44px; }
  #demos .construction-proof-film { left: 73px; bottom: 28px; font-size: 9px; }
}
@media(prefers-reduced-motion:reduce) {
  #demos .construction-proof, #demos .construction-proof-play { transition: none; }
}