/* UrusFamily TV page (/tv/, /en/tv/). Builds on site.css tokens only: tiles, hairlines, capsules.
   The one picture is the real board inside a generated clay TV; nothing else shows a bare capture. */

/* hero: words first, then the living room ------------------------------------ */
.tv-hero h1 { max-width: 16ch; }
.tv-hero .answer { max-width: 60ch; }
.tv-def { color: var(--muted); font-size: var(--t-body); max-width: 56ch; margin: 0 0 var(--s6); }
.tv-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin: 0 0 var(--s4); }
.tv-soon { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s5); margin: 0; border-radius: var(--radius-pill); background: var(--tile); border: 1px solid var(--border); color: var(--text); font-weight: var(--wt-medium); font-size: var(--t-small); }
.tv-soon svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.tv-cta .note { margin: 0; }
.tv-stage { margin: var(--s10) 0 0; border-radius: var(--radius-card); overflow: hidden; background: var(--tile); }
.tv-stage img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.tv-stage figcaption { padding: var(--s3) var(--s5); font-size: var(--t-meta); color: var(--muted); background: var(--bg); }

/* "scanned a code on your TV?" callout, right under the answer --------------- */
.tv-callout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin: 0 0 var(--s4); padding: var(--s4) var(--s5); max-width: 60ch; border: 1px solid var(--hairline); border-radius: var(--radius-control); background: var(--bg); }
.tv-callout svg { width: 24px; height: 24px; flex: none; color: var(--muted); }
.tv-callout p { margin: 0; flex: 1 1 16rem; font-size: var(--t-small); }
.tv-callout a { font-size: var(--t-small); font-weight: var(--wt-medium); }

/* what it shows: clay tiles, real list -------------------------------------- */
.tv-show { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .tv-show { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .tv-show { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.tv-show li { margin: 0; }
.tv-show .cell { height: 100%; }
.tv-show .cell p { max-width: none; }

/* what it never shows: a plain two column list on the band ------------------ */
.tv-never { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: 0 var(--s8); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .tv-never { grid-template-columns: repeat(2, 1fr); } }
.tv-never li { margin: 0; padding: var(--s4) 0; border-bottom: 1px solid var(--border); display: flex; gap: var(--s3); align-items: baseline; }
.tv-never li::before { content: ""; flex: none; width: 10px; height: 1.5px; background: var(--warn); transform: translateY(-.3em); }

/* which TVs: status chips in the table --------------------------------------- */
.tv-status { display: inline-block; padding: var(--s1) var(--s3); border-radius: var(--radius-pill); font-size: var(--t-meta); font-weight: var(--wt-medium); background: var(--tile); color: var(--muted); }
@media (max-width: 40rem) { #serasi td, #serasi th, #tvs td, #tvs th { padding-right: var(--s3); } .tv-status { border-radius: var(--radius-nested); } }
.tv-status-first { background: var(--text); color: var(--on-primary); }

/* price line -------------------------------------------------------------- */
.tv-plans { display: grid; gap: var(--s4); grid-template-columns: 1fr; max-width: none; list-style: none; padding: 0; margin: 0 0 var(--s6); }
@media (min-width: 46rem) { .tv-plans { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
.tv-plans li { margin: 0; }
.tv-plans .plan { height: 100%; }
.tv-plans .price { margin-bottom: var(--s3); }

.tv-sec h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.08; max-width: 22ch; }
.tv-sec .section-head { margin-bottom: var(--s10); }
.tv-lede { font-size: var(--t-lead); line-height: 1.5; max-width: 60ch; margin-bottom: var(--s8); }