:root {
  --tv-brand: #1c2438;
  --tv-orange: #f97316;
  --tv-blue: #2563eb;
  --tv-text: #1c2438;
  --tv-muted: #5a657d;
  --tv-faint: #9ba5b7;
  --tv-bg: #f8f9fb;
  --tv-border: rgba(28, 36, 56, .1);
  --tv-shadow: 0 2px 8px rgba(28, 36, 56, .07), 0 1px 3px rgba(28, 36, 56, .05);
  --tv-radius: 8px;
}

* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--tv-bg); color: var(--tv-text); font-family: 'Noto Sans HK', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; line-height: 1.65; }
a { color: inherit; }
.tv-topbar { background: #111; padding: 6px 32px; display: flex; justify-content: flex-end; gap: 20px; }
.tv-topbar a { color: rgba(255,255,255,.55); font-size: 12px; text-decoration: none; }
.tv-nav { position: sticky; top: 0; z-index: 20; height: 72px; padding: 0 40px; background: #fff; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.tv-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.tv-logo img { width: 160px; height: 56px; object-fit: contain; }
.tv-nav-links { display: flex; height: 100%; align-items: center; }
.tv-nav-links a { height: 100%; padding: 0 14px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; color: var(--tv-muted); font-size: 13px; text-decoration: none; white-space: nowrap; }
.tv-nav-links a:hover, .tv-nav-links a.active { color: var(--tv-blue); border-bottom-color: var(--tv-blue); }
.tv-nav-right { display: flex; align-items: center; gap: 10px; }
.tv-business { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 5px; background: var(--tv-orange); color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tv-language { display: inline-flex; align-items: center; gap: 3px; color: var(--tv-muted); font-size: 12px; }
.tv-language button { border: 0; border-radius: 4px; padding: 4px 7px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.tv-language button.active { background: #eff6ff; color: var(--tv-blue); font-weight: 600; }
.tv-shell { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.tv-breadcrumb { padding: 20px 0 0; color: var(--tv-muted); font-size: 12px; }
.tv-breadcrumb a { color: var(--tv-muted); text-decoration: none; }
.tv-breadcrumb a:hover { color: var(--tv-blue); }
.tv-hero { margin: 20px 0 0; overflow: hidden; border-radius: 12px; background: linear-gradient(120deg, #111b34 0%, #263b65 65%, #315da4 100%); color: #fff; }
.tv-hero-inner { padding: 56px 52px; max-width: 820px; }
.tv-kicker { margin: 0 0 12px; color: #fed7aa; font-size: 12px; letter-spacing: .08em; }
.tv-hero h1 { margin: 0 0 16px; font-size: clamp(30px, 4vw, 48px); line-height: 1.2; letter-spacing: -.03em; }
.tv-hero p { max-width: 680px; margin: 0; color: rgba(255,255,255,.75); font-size: 15px; }
.tv-section { padding: 42px 0 0; }
.tv-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--tv-border); }
.tv-section-heading h2 { margin: 0 0 -1px; padding-bottom: 10px; border-bottom: 2px solid var(--tv-orange); font-size: 23px; line-height: 1.3; }
.tv-section-heading p { margin: 0 0 12px; color: var(--tv-muted); font-size: 13px; }
.tv-filter-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tv-filter { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--tv-border); border-radius: 99px; background: #fff; color: var(--tv-muted); cursor: pointer; font: inherit; font-size: 13px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.tv-filter:hover, .tv-filter.active { border-color: var(--tv-blue); background: #eff6ff; color: var(--tv-blue); }
.tv-filter-reset { margin: 12px 0 0; color: var(--tv-faint); font-size: 12px; }
.tv-platform-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.tv-platform-card { min-width: 0; overflow: hidden; border: 1px solid var(--tv-border); border-top: 3px solid var(--platform-accent, var(--tv-blue)); border-radius: var(--tv-radius); background: #fff; box-shadow: var(--tv-shadow); }
.tv-platform-card[hidden] { display: none; }
.tv-platform-card-body { padding: 18px; }
.tv-platform-head { display: flex; align-items: center; gap: 10px; min-height: 46px; }
.tv-platform-logo { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; overflow: hidden; box-sizing: border-box; padding: 4px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: var(--platform-accent); font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; }
.tv-platform-logo img { width: 100%; height: 100%; object-fit: contain; }
.tv-wordmark { display: block; max-width: 100%; padding: 0 3px; color: var(--platform-accent); font-family: 'Space Grotesk', 'Noto Sans HK', sans-serif; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: -.06em; text-align: center; overflow-wrap: anywhere; }
.tv-wordmark--now-tv { color: #e11d48; font-size: 16px; font-style: italic; letter-spacing: -.12em; }
.tv-wordmark--netflix { color: #e50914; font-family: Arial, sans-serif; font-size: 9px; font-weight: 900; letter-spacing: -.05em; }
.tv-wordmark--disney-plus { color: #113cc8; font-family: Georgia, serif; font-size: 11px; font-style: italic; font-weight: 700; }
.tv-wordmark--mytv-super { color: #7c3aed; font-size: 8px; font-weight: 900; letter-spacing: -.08em; }
.tv-platform-card h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.tv-status { display: inline-flex; margin-top: 14px; padding: 3px 8px; border: 1px solid #fde68a; border-radius: 4px; background: #fffbeb; color: #92400e; font-size: 11px; }
.tv-platform-price { margin: 18px 0 12px; padding: 12px 0; border-top: 1px solid var(--tv-border); border-bottom: 1px solid var(--tv-border); }
.tv-price-value { display: block; color: var(--tv-text); font-family: 'Space Grotesk', sans-serif; font-size: 25px; font-weight: 700; line-height: 1.2; }
.tv-price-label { color: var(--tv-muted); font-size: 11px; }
.tv-platform-summary { min-height: 56px; margin: 0 0 16px; color: var(--tv-muted); font-size: 12px; }
.tv-card-link, .tv-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; width: 100%; border-radius: 5px; font-size: 13px; text-decoration: none; }
.tv-card-link { border: 1px solid rgba(37,99,235,.25); background: #eff6ff; color: var(--tv-blue); }
.tv-card-link:hover { background: #dbeafe; }
.tv-cta { border: 0; background: var(--tv-orange); color: #fff; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
.tv-cta[aria-disabled="true"] { cursor: not-allowed; opacity: .62; }
.tv-note { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--tv-orange); background: #fff7ed; color: #7c2d12; font-size: 12px; }
.tv-compare-wrap { overflow: hidden; border: 1px solid var(--tv-border); border-radius: var(--tv-radius); background: #fff; box-shadow: var(--tv-shadow); }
.tv-compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tv-compare-table th, .tv-compare-table td { padding: 13px 12px; border-bottom: 1px solid var(--tv-border); text-align: left; vertical-align: top; font-size: 12px; overflow-wrap: anywhere; }
.tv-compare-table th { color: var(--tv-text); font-weight: 600; }
.tv-compare-table thead th { background: #f1f3f7; font-size: 13px; }
.tv-compare-table thead th:first-child { width: 18%; }
.tv-compare-table tbody th { background: #fafbfc; color: var(--tv-muted); font-weight: 500; }
.tv-compare-table tr:last-child th, .tv-compare-table tr:last-child td { border-bottom: 0; }
.tv-pending { color: #92400e; }
.tv-value-yes { color: #166534; font-weight: 600; }
.tv-value-no { color: var(--tv-muted); }
.tv-mobile-compare { display: none; }
.tv-faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tv-faq-item { overflow: hidden; border: 1px solid var(--tv-border); border-radius: var(--tv-radius); background: #fff; }
.tv-faq-item summary { padding: 15px 16px; cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; }
.tv-faq-item summary::-webkit-details-marker { display: none; }
.tv-faq-item summary::after { content: '+'; float: right; color: var(--tv-blue); font-size: 18px; font-weight: 400; line-height: 1; }
.tv-faq-item[open] summary::after { content: '−'; }
.tv-faq-answer { padding: 0 16px 16px; color: var(--tv-muted); font-size: 13px; }
.tv-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tv-related-card { padding: 18px; border: 1px solid var(--tv-border); border-radius: var(--tv-radius); background: #fff; box-shadow: var(--tv-shadow); text-decoration: none; }
.tv-related-card:hover { border-color: rgba(37,99,235,.45); }
.tv-related-card h3 { margin: 0 0 6px; color: var(--tv-text); font-size: 15px; }
.tv-related-card p { margin: 0; color: var(--tv-muted); font-size: 12px; }
.tv-detail-hero { margin-top: 20px; padding: 30px 34px; border-radius: 12px; background: #fff; box-shadow: var(--tv-shadow); }
.tv-detail-hero .tv-platform-head { min-height: 56px; }
.tv-detail-hero .tv-platform-logo { width: 58px; height: 58px; flex-basis: 58px; font-size: 16px; }
.tv-detail-hero h1 { margin: 0; font-size: clamp(27px, 4vw, 42px); line-height: 1.2; }
.tv-detail-hero p { max-width: 760px; margin: 14px 0 0; color: var(--tv-muted); font-size: 14px; }
.tv-detail-actions { display: flex; gap: 10px; max-width: 420px; margin-top: 20px; }
.tv-detail-actions > * { flex: 1; }
.tv-detail-facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.tv-fact { padding: 16px; border: 1px solid var(--tv-border); border-radius: var(--tv-radius); background: #fff; box-shadow: var(--tv-shadow); }
.tv-fact-label { display: block; margin-bottom: 6px; color: var(--tv-muted); font-size: 11px; }
.tv-fact-value { display: block; color: var(--tv-text); font-size: 15px; font-weight: 600; }
.tv-detail-block-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.tv-detail-block { padding: 20px; border: 1px solid var(--tv-border); border-radius: var(--tv-radius); background: #fff; box-shadow: var(--tv-shadow); }
.tv-detail-block h3 { margin: 0 0 12px; font-size: 16px; }
.tv-detail-block p { margin: 0; color: var(--tv-muted); font-size: 13px; }
.tv-detail-block ul { margin: 0; padding-left: 20px; color: var(--tv-muted); font-size: 13px; }
.tv-empty-state { padding: 14px; border: 1px dashed #fbbf24; border-radius: 5px; background: #fffbeb; color: #92400e; font-size: 12px; }
.tv-footer { margin-top: 48px; padding: 42px 40px 20px; border-top: 3px solid var(--tv-orange); background: #1a1a1a; color: #fff; }
.tv-footer-grid { max-width: 1100px; margin: 0 auto 28px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; }
.tv-footer-logo img { width: auto; height: 36px; filter: brightness(0) invert(1); }
.tv-footer-tagline { margin-top: 10px; color: rgba(255,255,255,.48); font-size: 12px; line-height: 1.75; }
.tv-footer-title { margin-bottom: 12px; color: rgba(255,255,255,.36); font-size: 11px; letter-spacing: .08em; }
.tv-footer-links { display: flex; flex-direction: column; gap: 7px; }
.tv-footer-links a { color: rgba(255,255,255,.58); font-size: 12px; text-decoration: none; }
.tv-footer-links a:hover { color: #fff; }
.tv-footer-bottom { max-width: 1100px; margin: 0 auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.32); font-size: 11px; }
@media (max-width: 1100px) { .tv-nav-links a { padding: 0 8px; font-size: 12px; } .tv-platform-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 768px) {
  body { font-size: 15px; }
  .tv-topbar { display: none; }
  .tv-nav { height: 64px; padding: 0 16px; }
  .tv-nav-links { display: none; }
  .tv-logo img { width: 140px; height: 52px; }
  .tv-business { padding: 7px 10px; font-size: 11px; }
  .tv-language { display: none; }
  .tv-shell { padding: 0 16px; }
  .tv-breadcrumb { padding-top: 14px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tv-hero { margin-top: 14px; border-radius: 9px; }
  .tv-hero-inner { padding: 36px 22px; }
  .tv-hero h1 { font-size: 29px; }
  .tv-hero p { font-size: 13px; }
  .tv-section { padding-top: 32px; }
  .tv-section-heading { display: block; }
  .tv-section-heading h2 { display: inline-block; font-size: 20px; }
  .tv-section-heading p { margin-top: 8px; }
  .tv-filter-list { gap: 7px; }
  .tv-filter { padding: 7px 11px; font-size: 12px; }
  .tv-platform-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .tv-platform-card-body { padding: 14px; }
  .tv-platform-head { gap: 7px; }
  .tv-platform-logo { width: 36px; height: 36px; flex-basis: 36px; font-size: 11px; }
  .tv-platform-card h3 { font-size: 14px; }
  .tv-platform-price { margin: 13px 0 10px; padding: 10px 0; }
  .tv-price-value { font-size: 20px; }
  .tv-platform-summary { min-height: 72px; font-size: 11px; }
  .tv-card-link { min-height: 36px; padding: 4px; font-size: 11px; text-align: center; }
  .tv-compare-wrap { display: none; }
  .tv-mobile-compare { display: grid; gap: 10px; }
  .tv-mobile-compare-card { padding: 16px; border: 1px solid var(--tv-border); border-left: 3px solid var(--platform-accent, var(--tv-blue)); border-radius: var(--tv-radius); background: #fff; box-shadow: var(--tv-shadow); }
  .tv-mobile-compare-card h3 { margin: 0 0 12px; font-size: 16px; }
  .tv-mobile-facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .tv-mobile-fact { padding: 8px 10px; border-radius: 5px; background: #f8f9fb; }
  .tv-mobile-fact span { display: block; color: var(--tv-muted); font-size: 10px; }
  .tv-mobile-fact strong { display: block; margin-top: 2px; font-size: 12px; }
  .tv-faq-list, .tv-related-grid, .tv-detail-block-grid { grid-template-columns: 1fr; }
  .tv-detail-hero { margin-top: 14px; padding: 22px 18px; }
  .tv-detail-hero h1 { font-size: 27px; }
  .tv-detail-actions { display: grid; max-width: none; }
  .tv-detail-facts { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .tv-fact { padding: 12px; }
  .tv-fact-value { font-size: 13px; }
  .tv-footer { margin-top: 36px; padding: 32px 16px 18px; }
  .tv-footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .tv-footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .tv-platform-grid { grid-template-columns: 1fr; } .tv-footer-grid { grid-template-columns: 1fr; } .tv-footer-grid > :first-child { grid-column: auto; } }