.tv { background: var(--dark); color: var(--on-dark); overflow: hidden; }
.tv .eyebrow { color: var(--brand-on-dark); }
.tv .h2 { color: var(--on-dark); }

.tv-grid { padding-top: 112px; padding-bottom: 112px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 64px; align-items: center; }

.tv-copy { display: flex; flex-direction: column; gap: 22px; }
.tv-copy > p { max-width: 480px; font: 400 18px/1.6 var(--sans); color: #B5B5B5; }

.tv-list { margin-top: 8px; padding: 0; list-style: none; }
.tv-list li { min-height: 52px; display: flex; align-items: center; gap: 14px; border-top: 1px solid rgba(255, 255, 255, .08); font: 500 16px/1.4 var(--sans); color: #E5E5E5; }
.tv-list .ico { width: 22px; height: 22px; color: var(--brand-on-dark); }

.tv-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font: 600 16px/1 var(--sans); color: var(--brand-on-dark); }
.tv-link:hover { color: #FCA5A5; }
.tv-link .ico { width: 18px; height: 18px; }

.tv-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #111111; border: 8px solid #1F1F1F; box-shadow: 0 60px 120px -50px rgba(220, 38, 38, .45); overflow: hidden; display: flex; align-items: center; gap: 6%; padding: 0 6%; }
.tv-screen::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 70% at 20% 50%, rgba(220, 38, 38, .18), transparent); }

.tv-panel { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.tv-mark { width: 30px; height: 30px; color: var(--brand-on-dark); }
.tv-panel strong { font: 700 clamp(16px, 2.2vw, 26px)/1.15 var(--sans); letter-spacing: -.5px; }
.tv-panel span { font: 400 clamp(11px, 1.2vw, 14px)/1.5 var(--sans); color: var(--faint); }
.tv-panel b { font-weight: 500; color: var(--on-dark); }

.tv-qr { position: relative; width: 32%; aspect-ratio: 1; border-radius: 14px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; color: var(--dark); }
.tv-qr .ico { width: 78%; height: 78%; stroke-width: 1.6; }

.tv-page { max-width: 760px; padding-top: 72px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 32px; }
.tv-steps { padding: 0; list-style: none; counter-reset: passo; display: flex; flex-direction: column; gap: 12px; }
.tv-steps li { counter-increment: passo; padding: 20px 24px 20px 72px; position: relative; border-radius: 20px; background: var(--surface); border: 1px solid rgba(10, 10, 10, .07); color: var(--text-2); }
.tv-steps li::before { content: counter(passo, decimal-leading-zero); position: absolute; left: 24px; top: 21px; font: 600 14px/1.6 var(--mono); color: var(--brand); }
.tv-steps strong { display: block; font: 600 18px/1.4 var(--sans); color: var(--title); }

@media (max-width: 479px) {
  .tv-grid { padding-top: 72px; padding-bottom: 88px; gap: 48px; }
}