/* IPTV category page. Shared tokens and components live in style.css. */
.breadcrumb { padding-top:28px; }
.breadcrumb nav { display:flex; gap:12px; font-size:12px; color:var(--muted); }
.breadcrumb a { color:var(--blue-dark); }
.subscription-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:90px; align-items:center; padding-block:62px 80px; }
.subscription-hero h1 { font-size:clamp(52px,5.8vw,82px); line-height:1.03; margin:22px 0; }
.subscription-hero h1 em { color:var(--blue-dark); }
.subscription-hero > div > p:not(.eyebrow) { max-width:510px; color:var(--muted); font-size:16px; }
.subscription-intro { position:relative; overflow:hidden; background:var(--ink); color:white; padding:38px; border-radius:24px; }
.subscription-intro h2 { font-size:37px; margin:27px 0 18px; }
.subscription-intro > p:not(.eyebrow) { color:var(--line); font-size:14px; max-width:330px; position:relative; }
.subscription-intro > div { display:flex; flex-wrap:wrap; gap:9px; margin-top:29px; }
.subscription-intro > div span { border:1px solid #ffffff45; padding:7px 11px; font-size:11px; border-radius:30px; }
.intro-orbit { position:absolute; right:-40px; top:-55px; font-size:240px; color:#ffffff09; pointer-events:none; }
.subscription-catalog { border-top:1px solid var(--line); padding-top:42px; }
.catalog-heading { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:30px; }
.catalog-heading h2 { font-size:35px; margin-top:12px; }
.catalog-heading > span { font-size:12px; color:var(--muted); white-space:nowrap; }
.subscription-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.subscription-card { background:var(--white); border:1px solid var(--line); border-radius:20px; padding:25px; display:flex; flex-direction:column; min-width:0; }
.subscription-card:first-child { border-top:4px solid var(--blue); padding-top:22px; }
.subscription-top { display:flex; justify-content:space-between; align-items:start; margin-bottom:25px; gap:12px; }
.subscription-top img { width:85px; height:85px; object-fit:contain; border-radius:10px; }
.subscription-number { font-size:10px; color:var(--muted); padding-top:8px; }
.subscription-card .eyebrow { font-size:9px; color:var(--blue-dark); }
.subscription-card h2 { font-size:27px; letter-spacing:-.04em; margin:12px 0 16px; min-height:60px; }
.subscription-description { font-size:13px; color:var(--muted); }
.subscription-card ul { list-style:none; padding:22px 0 0; margin:22px 0 28px; border-top:1px solid var(--line); font-size:12px; line-height:1.6; }
.subscription-card li { position:relative; padding-left:19px; margin-bottom:12px; }
.subscription-card li:before { content:'✓'; position:absolute; left:0; color:var(--blue-dark); }
.subscription-card .button { margin-top:auto; padding:13px 12px; gap:10px; font-size:12px; }
.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:var(--white); }
.comparison table { border-collapse:collapse; width:100%; min-width:750px; font-size:13px; text-align:left; }
.comparison caption { text-align:left; padding:20px 24px; font-size:11px; color:var(--muted); }
.comparison th,.comparison td { padding:23px 24px; border-top:1px solid var(--line); }
.comparison thead { background:var(--ink); color:white; }
.comparison td a { color:var(--blue-dark); font-weight:700; white-space:nowrap; }
.subscription-steps { border-block:1px solid var(--line); display:grid; grid-template-columns:1fr 1.3fr; gap:90px; }
.subscription-steps h2 { margin-top:20px; }
.subscription-steps ol { list-style:none; padding:0; margin:0; }
.subscription-steps li { display:flex; gap:25px; padding:24px 0; border-bottom:1px solid var(--line); }
.subscription-steps li:first-child { padding-top:0; }
.subscription-steps li:last-child { border:0; padding-bottom:0; }
.subscription-steps li > span { font-size:13px; color:var(--blue-dark); margin-top:5px; }
.subscription-steps h3 { font-size:23px; margin-bottom:8px; }
.subscription-steps li p { font-size:14px; color:var(--muted); }
@media(max-width:1100px) {
  .subscription-hero { gap:40px; }
  .subscription-grid { grid-template-columns:repeat(2,1fr); }
  .subscription-card h2 { min-height:0; }
}
@media(max-width:760px) {
  .subscription-hero { grid-template-columns:1fr; padding-block:40px 50px; gap:30px; }
  .subscription-hero h1 { font-size:55px; }
  .subscription-intro { padding:28px; }
  .catalog-heading { display:block; }
  .catalog-heading > span { display:block; margin-top:15px; }
  .catalog-heading h2 { font-size:30px; }
  .subscription-grid { grid-template-columns:1fr; }
  .subscription-card { padding:28px; }
  .subscription-card:first-child { padding-top:25px; }
  .subscription-top img { width:96px; height:96px; }
  .subscription-steps { grid-template-columns:1fr; gap:30px; }
}

/* The card itself is the native link; no overlay or nested links. */
.subscription-card { color:var(--ink); text-decoration:none; cursor:pointer; }
.subscription-card .button { transform:none; }
.subscription-card:hover .button { background:var(--ink); }
.subscription-card:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }

/* Compact category introduction: show the product grid early. */
.subscription-hero.subscription-hero-compact { display:block; padding-block:25px 24px; }
.subscription-hero-compact h1 { font-size:clamp(30px,3vw,44px); line-height:1.12; margin:12px 0; max-width:1000px; }
.subscription-hero-compact > div > p:not(.eyebrow) { max-width:1000px; font-size:14px; line-height:1.6; }
.subscription-hero-compact .actions { margin-top:18px; gap:12px; }
.subscription-hero-compact .button { padding:12px 18px; }
.subscription-hero-compact .button-trial { background:var(--white); border-color:var(--blue-dark); color:var(--blue-dark); }
.subscription-reassurance { display:flex; flex-wrap:wrap; gap:10px 22px; padding:0; margin:16px 0 0; list-style:none; color:var(--muted); font-size:11px; }
.subscription-reassurance span { color:var(--blue-dark); font-weight:700; margin-right:4px; }
.subscription-hero-compact + .subscription-catalog { padding-top:22px; }
.subscription-hero-compact + .subscription-catalog .catalog-heading { margin-bottom:14px; }
.subscription-hero-compact + .subscription-catalog .catalog-heading h2 { font-size:28px; margin-top:7px; }
.service-quick-guide { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-bottom:14px; }
.service-quick-guide a { font-size:12px; font-weight:600; line-height:1.5; color:var(--blue-dark); }
@media(max-width:1000px) { .service-quick-guide { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .subscription-hero.subscription-hero-compact { padding-block:20px; } .subscription-reassurance { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .service-quick-guide { gap:10px; } }

/* Service comparison matrix, matching the four-column reference. */
.comparison-matrix .section-heading { align-items:center; margin-bottom:28px; }
.comparison-matrix .section-heading > p { max-width:330px; font-size:13px; }
.comparison-matrix .table-scroll { box-shadow:0 8px 30px #03124606; border:0; }
.comparison-matrix table { min-width:1000px; table-layout:fixed; border-collapse:separate; border-spacing:0; font-size:12px; line-height:1.55; }
.comparison-matrix .criteria-col { width:15.5%; }
.comparison-matrix thead { background:white; color:var(--ink); }
.comparison-matrix th,.comparison-matrix td { padding:15px 20px; border-top:0; border-bottom:1px solid var(--line); border-right:1px solid var(--line); vertical-align:middle; }
.comparison-matrix th:last-child,.comparison-matrix td:last-child { border-right:0; }
.comparison-matrix thead th { height:86px; }
.comparison-matrix thead th:first-child { font-size:11px; font-weight:400; color:var(--muted); }
.comparison-matrix tbody th { font-weight:650; }
.comparison-matrix td { color:var(--muted); }
.comparison-matrix tr > :nth-child(2) { background:#eef6ff; border-left:2px solid #bfdcfa; border-right:2px solid #bfdcfa; }
.comparison-matrix thead tr > :nth-child(2) { border-top:2px solid #bfdcfa; border-radius:12px 12px 0 0; }
.comparison-matrix tbody tr:last-child > :nth-child(2) { border-bottom:2px solid #bfdcfa; border-radius:0 0 12px 12px; }
.comparison-matrix tbody tr:not(:nth-child(4)) > :nth-child(2) { font-weight:750; color:var(--ink); }
.comparison-matrix tbody tr:last-child > * { border-bottom:0; }
.comparison-service { display:flex; align-items:center; gap:12px; color:var(--ink); font-size:14px; line-height:1.3; }
.comparison-service small { display:table; margin-top:7px; padding:4px 12px; border-radius:30px; background:#d4e9ff; color:var(--blue-dark); font-size:10px; }
.comparison-icon { font-size:30px; line-height:1; flex-shrink:0; color:var(--blue); }
.criteria-icon { display:inline-block; width:26px; font-size:21px; vertical-align:middle; margin-right:5px; color:var(--ink); }
.comparison-shortcuts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:20px; }
.comparison-shortcuts a { display:flex; align-items:center; gap:14px; padding:14px 18px; border:2px solid white; border-radius:14px; color:var(--ink); font-size:13px; font-weight:750; box-shadow:0 0 0 1px #e2e8f055; }
.comparison-shortcuts a:first-child { background:#e8f3ff; }
.comparison-shortcuts a:hover,.comparison-service:hover { color:var(--blue-dark); }
.comparison-matrix a:focus-visible,.comparison-matrix .table-scroll:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.comparison-bottom { display:flex; align-items:center; gap:20px; margin-top:16px; }
.comparison-bottom .fine-print { flex:1; margin:0; font-size:10px; }
.comparison-bottom .button { white-space:nowrap; padding:13px 20px; font-size:12px; }
.comparison-trial { display:flex; align-items:center; gap:10px; max-width:180px; border-left:1px solid var(--line); padding-left:20px; color:var(--blue-dark); font-size:10px; }
.comparison-trial > span { font-size:25px; }
.comparison-scroll-hint { display:none; font-size:11px; color:var(--muted); margin-bottom:10px; }
.comparison-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); padding:0!important; }
@media(max-width:1100px) { .comparison-scroll-hint { display:block; } .comparison-shortcuts { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .comparison-matrix .section-heading { gap:15px; } .comparison-matrix .section-heading h2 { font-size:32px; } .comparison-matrix tbody th,.comparison-matrix thead th:first-child { position:sticky; left:0; z-index:1; background:white; } .comparison-shortcuts a { font-size:11px; padding:12px 8px; gap:8px; } .comparison-shortcuts .comparison-icon { font-size:24px; } .comparison-bottom { flex-wrap:wrap; gap:16px; } .comparison-bottom .fine-print { flex-basis:100%; } .comparison-trial { flex:1; } }