/* the product pages (/streamhero/, /righero/): only layout, every colour and form comes from hero.css */
.intro { padding-block: 48px 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.intro .title { max-width: 900px; }
.split { padding-block: 104px 32px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.split > * { flex: 1 1 420px; min-width: 0; }
.split .txt { display: flex; flex-direction: column; gap: 14px; }
.body { margin: 0; color: #C5CCD4; font-size: 18px; line-height: 1.6; }
.sources { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.sources .hero-head { margin: 0 0 4px; }
.src { display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-size: 17px; }
.src svg { width: 22px; height: 22px; flex: none; }
.src .what { margin-left: auto; color: var(--muted); font-size: 14px; text-align: right; }
.block { padding-block: 96px 32px; display: flex; flex-direction: column; gap: 14px; }
.block .title-2 { margin-bottom: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.card { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.card p { margin: 0; color: #C5CCD4; font-size: 16px; line-height: 1.55; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.chips .inner { padding: 14px 18px; font: 600 17px var(--heading); letter-spacing: .02em; }
.price { padding-block: 96px; }
.price .box { padding: 40px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.price .what { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.price .hero-head { margin: 0; }
.amount { font: 700 56px/1 var(--heading); font-variant-numeric: tabular-nums; }
.amount small { font-size: 22px; color: var(--muted); font-weight: 600; }
.byline { display: flex; align-items: center; gap: 12px; color: var(--muted); text-decoration: none; font-size: 14px; }
.byline .wordmark { font-size: 16px; }
@media (max-width: 600px) {
  .navlink { display: none; }
  .intro { padding-top: 24px; }
  .split, .block { padding-block: 64px 16px; }
  .price { padding-block: 64px; } .price .box { padding: 28px 20px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .actions .btn.big { width: 100%; }
}