.streaming-hero{
  position:relative;
  overflow-x:clip;
  border-bottom:1px solid var(--color-line);
  background:var(--color-page);
}
.streaming-hero::before{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--color-ink-04) 1px,var(--color-clear) 1px),
    linear-gradient(90deg,var(--color-ink-04) 1px,var(--color-clear) 1px);
  background-size:42px 42px;
  content:"";
  mask-image:linear-gradient(90deg,var(--color-clear),var(--color-ink),var(--color-clear));
  pointer-events:none;
}
.streaming-hero-grid{
  position:relative;
  min-height:690px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,.82fr);
  gap:72px;
  align-items:center;
  padding-top:72px;
  padding-bottom:78px;
}
.streaming-hero-copy{
  position:relative;
  z-index:2;
  min-width:0;
  max-width:680px;
}
.streaming-hero-copy h1{
  max-width:640px;
  font-size:clamp(52px,5.1vw,72px);
}
.streaming-hero-actions{margin-bottom:24px}
.streaming-hero-copy .lead{margin-bottom:24px}
.streaming-facts{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.streaming-signal{
  position:relative;
  min-width:0;
  min-height:500px;
  border:1px solid var(--color-storm-line);
  border-radius:var(--radius-xl);
  background:var(--color-storm);
  box-shadow:var(--shadow-card-near),var(--shadow-card-far);
  color:var(--color-gold);
}
.signal-grid{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
  background-image:
    linear-gradient(var(--color-storm-line) 1px,var(--color-clear) 1px),
    linear-gradient(90deg,var(--color-storm-line) 1px,var(--color-clear) 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(circle at center,var(--color-ink),var(--color-clear) 76%);
}
.signal-core{
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  display:grid;
  width:132px;
  height:132px;
  place-items:center;
  border:1px solid var(--color-gold-deep);
  border-radius:50%;
  background:var(--color-storm-raised);
  box-shadow:0 0 56px var(--color-gold-26);
  transform:translate(-50%,-50%);
}
.signal-core svg{width:76px;height:76px}
.signal-ring{
  position:absolute;
  top:50%;
  left:50%;
  border:1px dashed var(--color-storm-line);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.signal-ring-wide{width:390px;height:390px}
.signal-ring-near{width:260px;height:260px}
.signal-node{
  position:absolute;
  z-index:4;
  display:inline-flex;
  min-height:36px;
  align-items:center;
  padding:6px 13px;
  border:1px solid var(--color-storm-line);
  border-radius:var(--radius-pill);
  background:var(--color-storm-raised);
  color:var(--color-panel);
  font-family:var(--font-mono);
  font-size:11px;
  box-shadow:var(--shadow-card-near);
}
.signal-node::before{
  width:7px;
  height:7px;
  flex-shrink:0;
  margin-right:7px;
  border-radius:50%;
  background:var(--color-gold);
  content:"";
}
.signal-node-netflix{top:17%;left:11%}
.signal-node-disney{top:21%;right:8%}
.signal-node-prime{right:12%;bottom:16%}
.signal-node-youtube{bottom:19%;left:8%}

.streaming-article{
  max-width:calc(1060px + (var(--gutter) * 2));
}
.streaming-article > section{
  padding-top:22px;
  padding-bottom:64px;
}
.streaming-article > section + section{
  border-top:1px solid var(--color-line);
}
.streaming-article .section-head{
  max-width:820px;
  margin-bottom:30px;
}
.streaming-article .section-head .badge{margin-bottom:14px}
.streaming-article p{
  max-width:var(--reading-max);
  font-size:17px;
}
.streaming-article .callout{max-width:var(--reading-max)}
.streaming-table td:nth-child(3){
  color:var(--color-warning);
  font-weight:700;
}
.explain-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:30px 0;
}
.explain-card{
  min-width:0;
  padding:25px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-panel);
  box-shadow:var(--shadow-card-near);
}
.explain-card h3{font-size:21px}
.explain-card p{
  margin-bottom:0;
  font-size:15px;
}
.quality-checklist{
  max-width:var(--reading-max);
  margin-top:30px;
  padding:28px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-panel);
  box-shadow:var(--shadow-card-near);
}
.quality-checklist h3{font-size:21px}
.quality-checklist ul{
  display:grid;
  gap:10px;
  margin-bottom:0;
}
.selection-steps{
  max-width:var(--reading-max);
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:stream-step;
}
.selection-steps li{
  position:relative;
  min-height:72px;
  padding:0 0 30px 76px;
  counter-increment:stream-step;
}
.selection-steps li::before{
  position:absolute;
  top:0;
  left:0;
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  border-radius:50%;
  background:var(--color-storm);
  color:var(--color-gold);
  content:counter(stream-step);
  font-family:var(--font-mono);
  font-weight:800;
}
.selection-steps li:not(:last-child)::after{
  position:absolute;
  top:52px;
  bottom:4px;
  left:23px;
  width:1px;
  background:var(--color-line);
  content:"";
}
.selection-steps h3{
  margin-bottom:8px;
  font-size:21px;
}
.selection-steps p{
  margin-bottom:0;
  font-size:16px;
}
.error-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin:30px 0;
}
.error-item{
  min-width:0;
  padding:25px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-panel);
}
.error-item:first-child{
  border-color:var(--color-gold-deep);
  background:var(--color-gold-10);
}
.error-item h3{font-size:20px}
.error-item p{
  margin-bottom:0;
  font-size:15px;
}
.streaming-next{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:36px;
  align-items:center;
  margin-top:20px;
  padding:44px;
  border:0;
  border-radius:var(--radius-xl);
  background:var(--color-storm);
  color:var(--color-storm-muted);
}
.streaming-next h2{
  margin-bottom:14px;
  color:var(--color-panel);
  font-size:clamp(30px,3vw,44px);
}
.streaming-next p{
  margin-bottom:0;
  color:var(--color-storm-muted);
}
.streaming-next .btn-secondary{
  border-color:var(--color-storm-line);
  color:var(--color-panel);
}
.streaming-next .btn-secondary:hover{
  background:var(--color-panel);
  color:var(--color-ink);
}

@media (max-width:1120px){
  .streaming-hero-grid{
    grid-template-columns:1fr;
    gap:28px;
    padding-top:66px;
  }
  .streaming-hero-copy{max-width:760px}
  .streaming-signal{
    width:100%;
    max-width:720px;
    min-height:460px;
  }
}
@media (max-width:820px){
  .explain-grid{grid-template-columns:1fr}
  .error-list{grid-template-columns:1fr}
  .streaming-next{
    grid-template-columns:1fr;
    padding:32px;
  }
}
@media (max-width:768px){
  .streaming-hero-grid{
    min-height:auto;
    padding-top:54px;
    padding-bottom:66px;
  }
  .streaming-hero-copy h1{
    font-size:clamp(32px,9.8vw,40px);
  }
  .streaming-signal{min-height:390px}
  .signal-ring-wide{width:310px;height:310px}
  .signal-ring-near{width:210px;height:210px}
  .signal-core{width:112px;height:112px}
  .signal-node-prime{right:5%}
  .signal-node-youtube{left:4%}
  .streaming-article > section{padding-bottom:52px}
}
@media (max-width:520px){
  .streaming-signal{min-height:340px}
  .signal-ring-wide{width:270px;height:270px}
  .signal-ring-near{width:180px;height:180px}
  .signal-core{width:94px;height:94px}
  .signal-core svg{width:58px;height:58px}
  .signal-node{
    min-height:32px;
    padding:5px 9px;
    font-size:9px;
  }
  .signal-node-netflix{top:10%;left:5%}
  .signal-node-disney{top:15%;right:4%}
  .signal-node-prime{right:4%;bottom:11%}
  .signal-node-youtube{bottom:13%;left:4%}
  .selection-steps li{padding-left:62px}
  .selection-steps li::before{width:42px;height:42px}
  .selection-steps li:not(:last-child)::after{
    top:46px;
    left:20px;
  }
  .quality-checklist,
  .explain-card,
  .error-item{padding:22px}
  .streaming-next{padding:26px 22px}
}