/* =========================================================================
   VPNAJ · streaming.css
   Page-level layout for the streaming unlock guide: hero fact strip,
   region chips, IP comparison cards, check lists and the simplified
   Union Jack strokes. Only design tokens from base.css are referenced.
   ========================================================================= */

.hero .lede{max-width:720px}

.stream-facts{
  width:max-content;
  max-width:100%;
  margin:var(--sp-5) auto 0;
}

.region-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 10px;
  margin-top:var(--sp-4);
}
.region-row .chip{gap:6px}
.region-row .flag{margin-right:1px}

.stream-stack{
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
}
.stream-stack > *{min-width:0}

.compare-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:18px;
}
.compare-grid > *{min-width:0}

.compare-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.compare-card .tag{align-self:flex-start}
.compare-card h3{font-size:18px;line-height:1.4}
.compare-card p{font-size:13.5px;line-height:1.8}

.tick-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:var(--sp-3);
}
.tick-list li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:14.5px;
  line-height:1.8;
  color:var(--text-muted);
}
.tick-list svg{
  width:15px;
  height:15px;
  flex:none;
  margin-top:5px;
  color:var(--ok);
}
.tick-list strong{color:var(--text);font-weight:600}

.text-link{
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:2px;
}
.text-link:hover{color:var(--accent)}

.next-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.fine-print{
  font-size:13px;
  line-height:1.75;
  color:var(--text-muted);
}

/* Simplified Union Jack: strokes are centred on the diagonals, so the red
   band keeps a white fimbriation on both sides at 18×13 px. */
.uk-white{fill:none;stroke:var(--flag-white);stroke-width:2.6}
.uk-red{fill:none;stroke:var(--flag-red);stroke-width:1.2}

@media (max-width:640px){
  .stream-facts{width:100%}
  .region-row{gap:6px 8px}
}