/* Clean TV page styles. Light theme in the site system, ctv- prefix
   throughout. Filled cards and filled buttons only: no outline boxes,
   no bordered chips. Labels are full strength, never small tracked
   eyebrows. The safety block is dark and sets explicit light colors on
   every heading and line of body text inside it. */

#ctv-hero h1 { font-family: var(--tg-font-display, sans-serif); font-size: 34px; line-height: 1.15; color: var(--tg-ink, #111); margin: 0 0 10px; }
.ctv-lede { font-size: 17px; line-height: 1.55; font-weight: 600; color: var(--tg-ink, #111); margin: 0 0 10px; max-width: 62ch; }
.ctv-section { margin: 0 0 28px; }
.ctv-section > h2 { font-family: var(--tg-font-display, sans-serif); font-size: 22px; color: var(--tg-ink, #111); margin: 0 0 8px; }
.ctv-body { font-size: 14px; line-height: 1.6; color: var(--tg-ink-mute, #555); margin: 0 0 16px; max-width: 62ch; }
.ctv-body a { color: var(--tg-purple, #7A3CFF); font-weight: 600; }

.ctv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ctv-card { display: block; background: var(--tg-surface-2, #F3F1FF); border-radius: 14px; padding: 16px; box-shadow: var(--tg-shadow-1, 0 1px 3px rgba(0,0,0,.06)); }
.ctv-card-name { font-family: var(--tg-font-display, sans-serif); font-weight: 700; font-size: 15px; color: var(--tg-ink, #111); margin: 0 0 6px; overflow-wrap: anywhere; }
.ctv-blurb { font-size: 14px; line-height: 1.55; color: var(--tg-ink-mute, #555); margin: 0; }

/* Safety block: dark section, explicit light text everywhere inside. */
.ctv-safety { background: var(--tg-dark-bg, #08080F); border-radius: 20px; padding: 22px; }
.ctv-safety > h2 { color: var(--tg-dark-ink, #F5F5FA); }
.ctv-dotlist { list-style: none; margin: 0; padding: 0; }
.ctv-dotlist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: var(--tg-dark-ink-soft, #B4B4C8); margin: 0 0 10px; }
.ctv-dotlist li:last-child { margin-bottom: 0; }
.ctv-dotlist a { color: var(--tg-cyan, #00F5FF); font-weight: 600; }
.ctv-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 999px; background: var(--tg-cyan, #00F5FF); margin-top: 6px; }

/* Wizard */
.ctv-step { background: var(--tg-surface, #FBFBFF); border-radius: 20px; box-shadow: var(--tg-shadow-1, 0 1px 3px rgba(0,0,0,.06)); padding: 20px; max-width: 680px; }
.ctv-step-title { font-family: var(--tg-font-display, sans-serif); font-size: 18px; font-weight: 700; color: var(--tg-ink, #111); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.ctv-step-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--tg-purple, #7A3CFF); color: #fff; font-size: 15px; font-weight: 700; flex: 0 0 auto; }
.ctv-label { display: block; font-size: 14px; font-weight: 700; color: var(--tg-ink, #111); margin: 0 0 8px; }
.ctv-select { width: 100%; box-sizing: border-box; min-height: 54px; padding: 12px; font-size: 16px; font-family: inherit; color: var(--tg-ink, #111); background: var(--tg-surface-2, #F3F1FF); border: 0; border-radius: 12px; margin: 0 0 16px; cursor: pointer; }
.ctv-note { font-size: 14px; line-height: 1.55; font-weight: 600; color: var(--tg-ink-soft, #3B3B4C); margin: 4px 0 16px; min-height: 20px; }
.ctv-summary { font-size: 16px; line-height: 1.55; font-weight: 600; color: var(--tg-ink, #111); margin: 0 0 16px; }
.ctv-stop { background: #FDECEC; border-radius: 14px; padding: 14px 16px; margin: 0 0 16px; }
.ctv-stop-text { font-size: 14px; line-height: 1.6; color: #7A1010; margin: 0 0 8px; }
.ctv-stop-text:last-child { margin-bottom: 0; }
.ctv-stop-text a { color: #7A1010; font-weight: 700; }

.ctv-keep-list { margin: 0 0 8px; }
.ctv-check-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; background: var(--tg-surface-2, #F3F1FF); border-radius: 12px; margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--tg-ink, #111); cursor: pointer; }
.ctv-check-row input[type="checkbox"] { width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--tg-purple, #7A3CFF); cursor: pointer; }

.ctv-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ctv-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 22px; font-size: 15px; font-weight: 700; font-family: inherit; color: var(--tg-ink, #111); background: var(--tg-surface-3, #EDE9FF); border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; }
.ctv-btn:hover { background: #E0D8FF; }
.ctv-btn:disabled { opacity: .5; cursor: default; }
.ctv-btn-primary { background: var(--tg-grad, linear-gradient(90deg, #FF2DD1, #7A3CFF, #00A7FF, #00F5FF)); color: #fff; }
.ctv-btn-primary:hover { background: var(--tg-grad, linear-gradient(90deg, #FF2DD1, #7A3CFF, #00A7FF, #00F5FF)); opacity: .92; }
.ctv-cta { margin: 4px 0 8px; }

.ctv-downloads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; }
.ctv-dl { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; border-radius: 14px; padding: 14px 16px; text-align: left; min-height: 64px; }
.ctv-dl-name { font-size: 15px; font-weight: 700; color: var(--tg-ink, #111); }
.ctv-dl-line { font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--tg-ink-mute, #555); }

@media (max-width: 480px) {
  #ctv-hero h1 { font-size: 28px; }
  .ctv-grid { grid-template-columns: 1fr; gap: 10px; }
  .ctv-card { padding: 12px; }
  .ctv-safety { padding: 16px; }
  .ctv-step { padding: 16px; }
  .ctv-downloads { grid-template-columns: 1fr; }
  .ctv-nav .ctv-btn { flex: 1 1 auto; }
}

/* The download anchor must keep white text on the gradient (site link color wins on anchors otherwise). */
.ctv-section a.ctv-btn-primary { color: #fff; }