@media (max-width: 520px) { .phero h1 em { white-space: normal; } }

.tv-features { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tv-features li { padding: 26px 24px 24px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.tv-features svg { width: 46px; height: 46px; padding: 11px; border-radius: 12px; background: var(--soft); stroke: var(--blue); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tv-features h3 { margin: 16px 0 6px; font-size: 18px; }
.tv-features p { margin: 0; font-size: 15px; line-height: 1.6; }

.tv-features #ads-feature { border-color: var(--teal); box-shadow: inset 0 3px 0 var(--teal); }
@media (max-width: 1000px) { .tv-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tv-features { grid-template-columns: 1fr; } }

.tv-quote { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.tv-quote b { font-size: 44px; }
.tv-quote span { font-size: 16px; }

.tv-how h3 { margin-bottom: 18px; }
.tv-how ol { list-style: none; margin: 0; padding: 0; counter-reset: how; }
.tv-how li { position: relative; counter-increment: how; padding: 0 0 20px 46px; font-size: 16px; }
.tv-how li:last-child { padding-bottom: 0; }
.tv-how li::before {
  content: counter(how); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 800; color: var(--blue); background: var(--soft);
}
.tv-how b { display: block; color: var(--navy); }

#why-cdn thead td { background: var(--soft); }
@media (max-width: 600px) {
  #why-cdn .cc-table { min-width: 0; font-size: 14px; }
  #why-cdn .cc-table th, #why-cdn .cc-table td { padding: 12px 10px; }
  #why-cdn .cc-table tbody th { white-space: normal; }
}

@media (min-width: 861px) { .tv-flip > .browser { order: -1; } }