.media-intro-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  align-items:center;
  gap:64px;
}
.media-intro-copy,.media-viewfinder{
  min-width:0;
}
.media-intro-copy>.badge{
  margin-bottom:24px;
}
.media-intro-copy h1{
  margin-bottom:28px;
}
.media-intro-copy>.tag{
  margin-right:8px;
  margin-bottom:8px;
}
.media-viewfinder{
  background:linear-gradient(145deg,var(--bg-panel),var(--accent-tint));
}
.media-viewfinder-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:24px;
}
.media-viewfinder-top>.mono{
  font-size:var(--text-xs);
}
.media-screen{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:32px 20px;
  border:1px solid var(--hi-85);
  border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--candy-coral-a),var(--candy-coral-b));
  box-shadow:0 20px 40px -24px var(--sh-coral-32),inset 0 1px 0 var(--hi-85);
  text-align:center;
}
.media-screen svg{
  flex-shrink:0;
  fill:none;
  stroke:var(--accent-dark);
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
  margin-bottom:16px;
}
.media-screen p{
  margin-bottom:8px;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--h3-size);
}
.media-screen>span{
  color:var(--text-muted);
  font-size:var(--text-sm);
}
.media-check-list{
  list-style:none;
  padding:0;
  margin:24px 0 16px;
}
.media-check-list li{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:10px 0;
  border-bottom:1px dashed var(--border);
  color:var(--text-muted);
  font-size:var(--text-sm);
}
.media-check-list li>span{
  flex-shrink:0;
  color:var(--accent-dark);
  font-weight:var(--weight-bold);
}
.media-caption{
  margin-bottom:0;
  font-size:var(--text-xs);
  color:var(--text-muted);
}
.media-chapter{
  padding-top:12px;
  padding-bottom:32px;
}
.media-chapter h2{
  margin-top:24px;
}
.media-chapter .grid{
  margin-bottom:24px;
}
.media-chapter .panel p:last-child{
  margin-bottom:0;
}
.media-next{
  margin-top:32px;
}
.media-next .cta-row{
  margin-top:24px;
  margin-bottom:0;
}
.media-next a.btn{
  color:var(--text);
}
@media(max-width:1100px){
  .media-intro-grid{
    gap:32px;
  }
}
@media(max-width:768px){
  .media-intro-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .media-intro-copy .lede{
    max-width:none;
  }
  .media-chapter{
    padding-bottom:24px;
  }
}
@media(max-width:640px){
  .media-viewfinder-top{
    margin-bottom:16px;
  }
  .media-screen{
    padding:24px 16px;
  }
}