@font-face {
  font-family: "Bricolage Grotesque";
  src: url("./fonts/BricolageGrotesque.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("./fonts/Manrope.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

/* ==========================================================================
   IPTVNetworkHub — shared stylesheet
   Extracted from index.html so that index.html and channels.html can share
   one visual system (variables, reset, typography, buttons, nav, sections,
   cards, bento, pricing, testimonials, FAQ, footer, waves, responsive rules).
   Page-specific styles are scoped under .channels-page at the end of the file.
   ========================================================================== */

:root {
  --white: #FFFFFF;
  --paper: #FBFAF7;
  --ink: #121109;
  --ink-soft: #6B6858;
  --line: #ECE8DD;
  --black: #0B0A07;
  --gold-1: #FFDE87;
  --gold-2: #E6B94D;
  --gold-3: #B8862B;
  --radius-lg: 26px;
  --radius-md: 18px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--white);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
.display {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width:640px) {
  .wrap {
    padding: 0 20px;
  }
}

.gold-text {
  background: linear-gradient(100deg, var(--gold-1), var(--gold-3) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  font-weight: 700;
  font-size: 15px;
  border-radius: 100px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}

.btn-grad {
  background: linear-gradient(100deg, var(--gold-1), var(--gold-2) 60%, var(--gold-3));
  color: var(--black);
  box-shadow: 0 8px 24px -8px rgba(184, 134, 43, 0.55);
}

.btn-grad:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -6px rgba(184, 134, 43, 0.6);
}

.btn-ghost-dark {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.16);
}

.btn-ghost-dark:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn-ghost-light {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn-ghost-light:hover {
  border-color: var(--gold-3);
  color: var(--gold-3);
}

/* Floating nav. The outer element is transparent and its mobile drawer is
   rendered as an overlay, so nothing reveals the white page behind it.
   The bar itself stays put while scrolling — only the mobile drawer opens
   and closes. */
.nav-outer {
  position: sticky;
  top: 18px;
  z-index: 60;
  padding: 0 20px;
  background: transparent;
}

.nav {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 12px 22px;
  background: rgba(11, 10, 7, 0.82);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.35);
}

.logo {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo .mark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
  flex: none;
}

.logo .hub {
  background: linear-gradient(100deg, var(--gold-2), var(--gold-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-links {
  display: flex;
  gap: 30px;
  align-items: center;
}

/* The site navigation carries eight items plus the CTA, which overflows
   the pill between roughly 920px and 1120px. Tighten the gaps and the
   link size in that band rather than letting the row run into the CTA
   or wrap onto a second line. */
@media (max-width:1120px) {
  .nav-links {
    gap: 18px;
  }

  .nav-links a {
    font-size: 13.5px;
  }

  .nav-cta .btn {
    padding: 10px 16px;
  }
}

@media (max-width:1020px) {
  .nav-links {
    gap: 13px;
  }

  .nav-links a {
    font-size: 12.5px;
  }
}

.nav-links a {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  transition: color .15s ease;
}

.nav-links a:hover {
  color: var(--white);
}

/* Current-page indicator inside the navigation */
.nav-links a[aria-current="page"] {
  color: var(--white);
  position: relative;
}

.nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(100deg, var(--gold-1), var(--gold-3));
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-cta .btn {
  padding: 10px 11px;
  font-size: 13.5px;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  width: 32px;
  height: 32px;
  /* The three bars are stacked in a column and centred, so morphing them
     into a cross only takes one translate + one rotate per bar. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  margin: 2.5px 0;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
}

/* Open state: the bars fold into an X. */
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle span {
    transition: none;
  }
}

/* Mobile navigation drawer (shared by index.html and channels.html).
   It is an overlay: it is taken out of the flow so opening it never
   grows the sticky header and never pushes the page content down.
   It opens with a small slide/fade rather than popping in. */
.nav-mobile {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px) scale(.98);
  transform-origin: top center;
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1),
    visibility 0s linear .28s;
  position: absolute;
  top: calc(100% - 8px);
  left: 20px;
  right: 20px;
  max-width: 1160px;
  margin: 10px auto 0;
  background: rgba(11, 10, 7, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 16px 20px 20px;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}

.nav-mobile.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1),
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .nav-mobile {
    transition: none;
  }
}

.nav-mobile a {
  display: block;
  padding: 12px 4px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.nav-mobile a:last-of-type {
  border-bottom: none;
}

.nav-mobile a:hover,
.nav-mobile a:focus-visible {
  color: var(--white);
}

/* Current-page indicator inside the mobile drawer, mirroring the
   desktop underline so the active page is just as obvious on a phone. */
.nav-mobile a[aria-current="page"] {
  color: var(--white);
  position: relative;
  padding-left: 22px;
}

.nav-mobile a[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
}

.nav-mobile .btn {
  width: 100%;
  margin-top: 14px;
}

@media (max-width:920px) {
  .nav-links {
    display: none;
  }

  .menu-toggle {
    /* flex, not block — the bars are centred by the flex column layout. */
    display: flex;
  }

  /* On small screens the header CTA is dropped entirely: the bar would be
     too crowded next to the logo and the menu button. */
  .nav-cta {
    display: none;
  }

  /* The plans CTA is not repeated in the mobile drawer: it is the first
     entry in the links list on small screens, so showing it twice is noise. */
  .nav-mobile .nav-mobile-cta {
    display: none;
  }
}

/* WAVE DIVIDERS */
.wave {
  line-height: 0;
  position: relative;
  z-index: 1;
}

.wave svg {
  display: block;
  width: 100%;
  height: 90px;
}

/* Pull the section right after a wave up by 2px so any subpixel
   rounding gap from the SVG scaling is covered, not exposed. */
.wave + section,
.wave + footer {
  position: relative;
  margin-top: -2px;
}

/* The hero's wave is nested inside .hero (which clips with
   overflow:hidden), so fix that boundary from the outside too. */
.hero + section {
  position: relative;
  margin-top: -2px;
}

@media (max-width:700px) {
  .wave svg {
    height: 52px;
  }
}

.wave.bg-black {
  background: var(--black);
}

.wave.bg-white {
  background: var(--white);
}

/* HERO */
.hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  padding: 150px 0 0;
  margin-top: -92px;
  overflow: hidden;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.glow-1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(255, 222, 135, 0.32), transparent 70%);
  top: -180px;
  left: -140px;
}

.glow-2 {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(184, 134, 43, 0.35), transparent 70%);
  top: 20px;
  right: -160px;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 50px;
  align-items: center;
  padding-bottom: 70px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-1);
  background: rgba(255, 222, 135, 0.08);
  border: 1px solid rgba(255, 222, 135, 0.25);
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 26px;
}

.hero h1 {
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 22px;
}

.hero p.lead {
  font-size: 17.5px;
  color: rgba(255, 255, 255, 0.62);
  max-width: 460px;
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width:900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .hero h1 {
    font-size: 40px;
  }

  .hero h1,
  .hero p.lead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }
}

/* Phone mockup */
.phone-wrap {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.phone {
  width: 250px;
  border-radius: 34px;
  background: linear-gradient(160deg, #3A3730, #16150F 55%, #0C0B08);
  border: 6px solid #57534A;
  padding: 14px 12px;
  box-shadow: 0 30px 70px -20px rgba(230, 185, 77, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.phone-notch {
  position: relative;
  width: 82px;
  height: 20px;
  background: #0B0A07;
  border-radius: 12px;
  margin: 0 auto 12px;
}

/* Camera lens inside the island */
.phone-notch::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #2b3f6b 0%, #0d1424 55%, #05070c 100%);
}

.phone-screen {
  background: var(--black);
  border-radius: 18px;
  aspect-ratio: 9/17;
  position: relative;
  overflow: hidden;
}

.phone-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: top center;
}

/* Device cluster: TV + tablet + phone together in the hero */
.device-cluster {
  position: relative;
  width: 480px;
  max-width: 100%;
  height: 430px;
}

/* TV mockup */
.cluster-tv {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  z-index: 1;
}

.tv-frame {
  border-radius: 14px;
  background: linear-gradient(160deg, #3A3730, #16150F 55%, #0C0B08);
  border: 8px solid #57534A;
  padding: 10px;
  box-shadow: 0 30px 70px -20px rgba(230, 185, 77, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.tv-screen {
  background: var(--black);
  border-radius: 4px;
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
}

.tv-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: top center;
}

.tv-stand-neck {
  width: 16px;
  height: 24px;
  background: #57534A;
  margin: 0 auto;
}

.tv-stand-base {
  width: 130px;
  height: 10px;
  background: #57534A;
  border-radius: 6px;
  margin: 0 auto;
}

/* Tablet mockup */
.cluster-tablet {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 150px;
  transform: rotate(-6deg);
  z-index: 2;
}

.tablet-frame {
  border-radius: 20px;
  background: linear-gradient(160deg, #3A3730, #16150F 55%, #0C0B08);
  border: 6px solid #57534A;
  padding: 10px 8px;
  box-shadow: 0 24px 60px -18px rgba(230, 185, 77, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.tablet-cam {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0B0A07;
  margin: 0 auto 8px;
}

.tablet-screen {
  background: var(--black);
  border-radius: 10px;
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
}

.tablet-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: top center;
}

/* Phone position inside the cluster — .phone/.phone-notch/.phone-screen are untouched */
.cluster-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: scale(0.72) rotate(6deg);
  transform-origin: bottom right;
  z-index: 3;
}

@media (max-width:900px) {
  .device-cluster {
    width: 400px;
    height: 360px;
  }

  .cluster-tv {
    width: 300px;
  }

  .cluster-tablet {
    width: 125px;
  }

  .cluster-phone {
    transform: scale(0.6) rotate(6deg);
  }
}

@media (max-width:480px) {
  .device-cluster {
    width: 280px;
    height: 260px;
  }

  .cluster-tv {
    width: 210px;
  }

  .tv-stand-base {
    width: 90px;
  }

  .cluster-tablet {
    width: 90px;
  }

  .cluster-phone {
    transform: scale(0.42) rotate(6deg);
  }
}

/* Headline section under hero */
.intro {
  padding: 64px 0 10px;
  background: var(--white);
}

.intro-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: start;
}

.intro h2 {
  font-size: 32px;
  line-height: 1.18;
  max-width: 520px;
}

.intro p {
  color: var(--ink-soft);
  font-size: 15.5px;
  margin-top: 16px;
  max-width: 440px;
}

@media (max-width:860px) {
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
  }

  .intro-content {
    text-align: center;
    width: 100%;
  }

  .intro h2,
  .intro p {
    margin-left: auto;
    margin-right: auto;
  }

  .intro-content .hero-actions {
    justify-content: center;
  }

  /* Stats: icon on top, number and label centered underneath */
  .stat-list {
    width: 100%;
    align-items: center;
    gap: 22px;
  }

  .stat-item {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    text-align: center;
    width: 100%;
  }

  .stat-item > div:last-child {
    text-align: center;
  }
}

/* Stat badges (circle icon style, like reference) */
.stat-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex: none;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-badge svg {
  width: 22px;
  height: 22px;
}

.stat-item .num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 800;
}

.stat-item .label {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Section generic */
.section {
  padding: 60px 0;
}

/* Continuation sections split out of one logical block (the old
   #channels section). They keep their own <section> + .wrap, but drop
   the top padding so the stack still reads as one visual group —
   the gap between them stays the swiper-block's own margin. */
.section-continued {
  padding-top: 0;
}

/* The channel and movie rails form one continuous content group. */
.section-continued + .section-continued .swiper-block {
  margin-top: 18px;
}

.section-head {
  max-width: 600px;
  margin: 0 auto 52px;
  text-align: center;
}

.section-head .kicker {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-3);
  margin-bottom: 14px;
}

.section-head h2 {
  font-size: 36px;
  line-height: 1.14;
  margin-bottom: 14px;
}

.section-head p {
  color: var(--ink-soft);
  font-size: 16px;
}

.pricing-section .section-head h2,
.how-section .section-head h2 {
  color: var(--white);
}

.pricing-section .section-head p,
.how-section .section-head p {
  color: rgba(255, 255, 255, 0.55);
}

.pricing-section .kicker,
.how-section .kicker {
  color: var(--gold-1);
}

/* Bento features */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.bento-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}

.bento-card:hover {
  border-color: var(--gold-2);
  transform: translateY(-3px);
}

.bento-card h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

.bento-card p {
  font-size: 14px;
  color: var(--ink-soft);
}

/* Device icons (guides section) */
.guide-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 16px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--white);
}

/* Feature icon — the bento-1 artwork IS the empty top space of the card.
   As a flex child it absorbs all the slack (flex-grow), so it scales up
   until it hits the card's width or the remaining height. No box, no
   border: the artwork itself is the decoration. */
.bento-1 {
  padding: 0;
  overflow: hidden;
}

.bento-1 .guide-icon {
  width: 100%;
  height: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 150px;
  align-self: stretch;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: none;
  object-fit: cover;
  object-position: center 35%;
  transition: transform .45s ease, filter .45s ease;
}


.bento-1:hover .guide-icon {
  transform: scale(1.03);
  filter: saturate(1.12) brightness(1.03);
}

/* Card copy gets the padding that the card itself gave up, plus a soft
   light fade so the artwork blends into the text area instead of cutting. */
.bento-1 h3,
.bento-1 p,
.bento-1 .btn {
  margin-left: 28px;
  margin-right: 28px;
}

.bento-1 > h3 {
  position: relative;
  margin-top: -34px;
  padding-top: 34px;
  background: linear-gradient(to bottom, rgba(255, 250, 240, 0), rgba(255, 250, 240, 1) 62%);
}

.bento-1 .btn {
  margin-bottom: 28px;
}

.bento-1 {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  background: linear-gradient(160deg, #FFF7E6, var(--paper));
}

.bento-1 h3 {
  font-size: 24px;
}

.bento-2 {
  grid-column: span 2;
}

.bento-3 {
  grid-column: span 1;
}

.bento-4 {
  grid-column: span 1;
}

.bento-5 {
  grid-column: span 2;
}

@media (max-width:900px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-1 {
    grid-column: span 2;
    min-height: 200px;
  }

  .bento-2,
  .bento-5 {
    grid-column: span 2;
  }
}

@media (max-width:600px) {
  .bento {
    grid-template-columns: 1fr;
  }

  .bento-1,
  .bento-2,
  .bento-3,
  .bento-4,
  .bento-5 {
    grid-column: span 1;
  }
}

/* Swipers (Live Channels / Movies & Series) */
.swiper-block {
  margin-top: 64px;
}

.rail-block {
  position: relative;
  padding: 28px 0 24px;
  border-top: 1px solid var(--line);
}

.rail-block::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 74px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-1));
}

.rail-block-movies {
  padding-top: 34px;
  background: linear-gradient(180deg, rgba(251, 250, 247, 0.7), rgba(255, 255, 255, 0));
}

.swiper-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.swiper-heading {
  max-width: 680px;
}

.rail-kicker {
  margin-bottom: 6px;
  color: var(--gold-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.swiper-head h3 {
  font-size: 22px;
}

.rail-summary {
  max-width: 620px;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.swiper-head-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Sits under the channel strip, centred — the "view everything" step
   after the row of previews. */
.swiper-foot {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

/* "View all channels" — quiet text link that reveals the gold arrow on hover.
   The Live channels block sits on the light section background, so the
   resting colour is the dark ink, not white. */
.swiper-viewall {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(18, 17, 9, 0.62);
  transition: color .15s ease;
}

.swiper-viewall svg {
  width: 15px;
  height: 15px;
  transition: transform .18s ease;
}

.swiper-viewall:hover,
.swiper-viewall:focus-visible {
  color: var(--gold-3);
}

.swiper-viewall:hover svg,
.swiper-viewall:focus-visible svg {
  transform: translateX(3px);
}

/* The block heading doubles as a link back to the channel lineup */
.swiper-title-link {
  color: inherit;
  transition: color .15s ease;
}

.swiper-title-link:hover,
.swiper-title-link:focus-visible {
  color: var(--gold-3);
}

.swiper-arrows {
  display: flex;
  gap: 10px;
}

/* On narrow screens the heading, the "View all" link and the arrows would
   crowd one row, so they stack instead. */
@media (max-width:600px) {
  .swiper-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .swiper-head-actions {
    width: 100%;
    justify-content: space-between;
  }
}

.swiper-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  background: var(--black);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease;
}

.swiper-btn:hover {
  background: var(--gold-3);
  transform: translateY(-1px);
}

.swiper-btn svg {
  width: 16px;
  height: 16px;
}

.swiper-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.swiper-track:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 6px;
  border-radius: 8px;
}

.swiper-track::-webkit-scrollbar {
  display: none;
}

.swiper-track>* {
  scroll-snap-align: start;
  flex: none;
}

/* Each slide links to the full channel lineup on channels.html */
.channel-slide {
  display: block;
  width: 230px;
  aspect-ratio: 16/10;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--black);
  color: inherit;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.channel-slide:hover,
.channel-slide:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gold-1);
  box-shadow: 0 18px 34px -22px rgba(184, 134, 43, 0.85);
}

.channel-slide:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 2px;
}

/* Channel artwork */
.channel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkening scrim so the caption stays readable over any still */
.channel-slide::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 68%;
  background: linear-gradient(180deg, rgba(11, 10, 7, 0) 0%, rgba(11, 10, 7, 0.68) 55%, rgba(11, 10, 7, 0.92) 100%);
  pointer-events: none;
}

.channel-slide .caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
}

.channel-slide .cat {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}

.channel-slide .name {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--white);
}

.channel-slide .live-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  background: var(--gold-1);
  color: var(--black);
  padding: 3px 8px;
  border-radius: 6px;
}

.movie-slide {
  width: 160px;
  aspect-ratio: 2/3;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--black);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.movie-slide:hover,
.movie-slide:focus-visible {
  transform: translateY(-5px);
  border-color: var(--gold-1);
  box-shadow: 0 18px 34px -22px rgba(184, 134, 43, 0.85);
}

.movie-slide:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 2px;
}

/* Poster artwork */
.movie-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkening scrim so the caption stays readable over any poster */
.movie-slide::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(11, 10, 7, 0) 0%, rgba(11, 10, 7, 0.72) 55%, rgba(11, 10, 7, 0.94) 100%);
  pointer-events: none;
}

.movie-slide .caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
}

.movie-slide .play {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(11, 10, 7, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.movie-slide .play svg {
  width: 12px;
  height: 12px;
}

.movie-slide .genre {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 3px;
}

.movie-slide .title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
}

/* How it works (dark) */
.how-section {
  background: var(--black);
  color: var(--white);
}

.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.t-step {
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 30px;
}

.t-step .idx {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
  color: var(--black);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.t-step h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--white);
}

.t-step p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width:760px) {
  .timeline {
    grid-template-columns: 1fr;
  }
}

/* Devices */
.devices-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.devices-row span {
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

/* Supported devices grid */
.device-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.device-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 28px;
  transition: border-color .2s ease, transform .2s ease;
}

.device-card:hover {
  border-color: var(--gold-2);
  transform: translateY(-3px);
}

.device-icon {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, #FFF7E6, var(--paper));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.device-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

.device-card h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

.device-card p {
  font-size: 14px;
  color: var(--ink-soft);
}

@media (max-width:900px) {
  .device-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:600px) {
  .device-grid {
    grid-template-columns: 1fr;
  }
}

/* Pricing */
.pricing-section {
  background: var(--black);
  color: var(--white);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.plan {
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.plan.featured {
  background: linear-gradient(160deg, rgba(255, 222, 135, 0.09), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 222, 135, 0.35);
  box-shadow: 0 20px 50px -20px rgba(230, 185, 77, 0.35);
}

.plan-tag {
  position: absolute;
  top: -12px;
  left: 28px;
  background: linear-gradient(100deg, var(--gold-1), var(--gold-3));
  color: var(--black);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  padding: 5px 14px;
  border-radius: 100px;
}

.plan-name {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 16px;
}

.plan-price {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 4px;
}

.plan-price span {
  font-size: 14px;
  padding-left: 4px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
}

.plan-desc {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 24px;
}

.plan-features {
  margin-bottom: 28px;
}

.plan-features li {
  font-size: 14px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 10px;
  color: rgba(255, 255, 255, 0.85);
}

.plan-features li:first-child {
  border-top: none;
}

.plan-features li::before {
  content: '✦';
  color: var(--gold-2);
  flex: none;
  font-size: 11px;
  margin-top: 3px;
}

.plan .btn {
  width: 100%;
}

@media (max-width:900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* Testimonials */
.testi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.testi-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  padding: 26px;
  background: var(--paper);
}

.testi-card p.quote {
  font-size: 15px;
  margin-bottom: 20px;
}

.testi-card .who {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-3);
}

@media (max-width:760px) {
  .testi-row {
    grid-template-columns: 1fr;
  }
}

/* FAQ */
.faq {
  max-width: 740px;
  margin: 0 auto;
}

.faq-item {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  margin-bottom: 12px;
  padding: 4px 22px;
  background: var(--paper);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 15.5px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px;
  color: var(--gold-3);
  flex: none;
  margin-left: 20px;
}

.faq-item[open] summary::after {
  content: '–';
}

.faq-item p {
  color: var(--ink-soft);
  font-size: 14px;
  padding-bottom: 20px;
}

/* Dark variant of the FAQ block, used by the channels page */
.faq-item.faq-item-dark {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

.faq-item.faq-item-dark summary {
  color: var(--white);
}

.faq-item.faq-item-dark p {
  color: rgba(255, 255, 255, 0.55);
}

.faq-item.faq-item-dark summary::after {
  color: var(--gold-1);
}

/* Respect reduced-motion: the JS skips the height animation entirely, so no
   extra rule is needed here beyond keeping the marker transition subtle. */
.faq-item summary::after {
  transition: color .2s ease;
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--gold-3);
  outline-offset: 3px;
  border-radius: 8px;
}

/* CTA (dark) */
.cta-band {
  position: relative;
  background: var(--black);
  color: var(--white);
  padding: 90px 0 70px;
  text-align: center;
  overflow: hidden;
}

.cta-band .glow {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 222, 135, 0.2), transparent 70%);
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
}

.cta-inner {
  position: relative;
  z-index: 1;
}

.cta-band h2 {
  font-size: 38px;
  margin-bottom: 16px;
  color: var(--white);
}

.cta-band p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  margin-bottom: 34px;
}

.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Footer */
footer {
  background: var(--black);
  color: rgba(255, 255, 255, 0.6);
  padding: 50px 0 32px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand .logo {
  margin-bottom: 14px;
  color: var(--white);
}

.footer-brand p {
  font-size: 14px;
  max-width: 280px;
}

.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--white);
}

.footer-col li {
  margin-bottom: 11px;
}

.footer-col a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

.footer-col a:hover {
  color: var(--gold-1);
}

.footer-col .footer-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #4FBF74;
  font-weight: 700;
  font-size: 14px;
}

.footer-col .footer-whatsapp svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
}

.footer-col .footer-whatsapp:hover {
  color: #7FD89B;
}

.footer-col .footer-contact-note {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  max-width: 240px;
  color: rgba(255, 255, 255, 0.42);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}

/* Footer breakpoints. The desktop grid is four fixed columns with a 40px
   gap, which cannot shrink below ~640px — it overflows the viewport and
   leaves a strip of empty space at the right edge of the page on phones.
   Collapse it to two columns on tablets and a single stacked column on
   small screens, and let the bottom bar centre itself once it wraps. */
@media (max-width:900px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width:600px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-brand p,
  .footer-col .footer-contact-note {
    max-width: none;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ==========================================================================
   ACCESSIBILITY — visible focus states and reduced-motion support
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
  border-radius: 6px;
}

  .btn:focus-visible,
  .swiper-btn:focus-visible,
  .swiper-viewall:focus-visible,
  .swiper-title-link:focus-visible,
  .menu-toggle:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 3px;
}

a[aria-current="page"]:focus-visible {
  outline-color: var(--gold-1);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .bento-card:hover,
  .channel-card:hover,
  .channel-slide:hover,
  .swiper-btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   SHARED CHANNEL COMPONENTS
   Building blocks reused by the channel strips on index.html and by the
   channel grid on channels.html.
   ========================================================================== */

.channel-category {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold-3);
}

.channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(11, 10, 7, 0.06);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

.channel-badge.gold {
  background: linear-gradient(100deg, rgba(255, 222, 135, 0.35), rgba(184, 134, 43, 0.2));
  color: var(--gold-3);
  border-color: rgba(184, 134, 43, 0.35);
}

/* Firestick guide */
.guide-page main {
  background: var(--white);
}

.guide-hero {
  padding-top: 78px;
  padding-bottom: 54px;
  background: var(--paper);
}

.guide-breadcrumb {
  display: flex;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 13px;
  margin-bottom: 38px;
}

.guide-breadcrumb a:hover {
  color: var(--gold-3);
}

.guide-hero h1 {
  max-width: 900px;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1.02;
  margin: 14px 0 22px;
}

.guide-intro {
  max-width: 760px;
  color: var(--ink-soft);
  font-size: 18px;
}

.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 22px;
  color: var(--gold-3);
  font-size: 13px;
  font-weight: 700;
}

.guide-feature,
.guide-image {
  margin: 34px 0 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--black);
}

.guide-feature img,
.guide-image img {
  display: block;
  width: 100%;
  height: auto;
}



.guide-content {
  max-width: 860px;
  padding-top: 72px;
  padding-bottom: 90px;
}

.guide-content > p,
.guide-content > h2,
.guide-content > h3,
.guide-content > ul,
.guide-content > ol,
.guide-content > .faq,
.guide-content > .guide-notice {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.guide-content > p {
  color: var(--ink-soft);
  margin-bottom: 22px;
}

.guide-content h2 {
  font-size: 34px;
  line-height: 1.15;
  margin-top: 58px;
  margin-bottom: 18px;
}

.guide-content h3 {
  font-size: 22px;
  margin: 32px auto 8px;
}

.guide-list,
.guide-steps-overview {
  color: var(--ink-soft);
  margin-bottom: 22px;
  padding-left: 24px;
}

.guide-list {
  list-style: disc;
}

.guide-steps-overview {
  list-style: decimal;
}

.guide-list li,
.guide-steps-overview li {
  padding: 4px 0 4px 6px;
}

.guide-notice {
  padding: 20px 24px;
  border-left: 3px solid var(--gold-2);
  background: var(--paper);
  color: var(--ink-soft);
  margin-bottom: 34px;
}

.guide-image {
  max-width: 760px;
  margin: 28px auto 34px;
}

/* ---- Guide article extras (what-is-iptv.html and later guides) -------
   In-article figures and the terminology table reuse the same content
   width, radius, border and paper background as .guide-image, so a
   long-form guide still reads as part of the same design system. */

.guide-content-image {
  max-width: 760px;
  margin: 30px auto 36px;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--black);
}

.guide-content-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* The caption sits below the artwork on a paper strip, so it stays
   readable whether or not the image has loaded yet. */
.guide-content-image figcaption {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

/* Terminology table. Wrapped so it scrolls sideways instead of pushing
   the page wide on a phone. */
.guide-table-wrap {
  max-width: 760px;
  margin: 8px auto 30px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}

.guide-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14.5px;
  text-align: left;
}

.guide-table caption {
  caption-side: top;
  padding: 14px 20px 0;
  color: var(--ink-soft);
  font-size: 13px;
  text-align: left;
}

.guide-table th,
.guide-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.guide-table th {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-3);
  background: rgba(251, 250, 247, 0.92);
}

.guide-table tbody tr:last-child th,
.guide-table tbody tr:last-child td {
  border-bottom: none;
}

.guide-table tbody th {
  font-family: 'Manrope', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: transparent;
  white-space: normal;
}

.guide-table td {
  color: var(--ink-soft);
}

.guide-table code {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
}

/* Answers inside the guide FAQ are body copy, so they get a slightly
   wider measure than the site-wide .faq-item p default. */
.guide-content .faq-item p {
  font-size: 14.5px;
}

/* ---- Timeline on a light background ---------------------------------
   The shared .timeline is built for the dark .how-section: its cards use
   translucent white fills, borders and text, which disappear entirely on
   the white page a guide article sits on. This variant keeps the same
   structure and gold step badges, but swaps those values for the light
   surfaces already used by .device-card and .bento-card, so the section
   reads as part of the article instead of a black band dropped into it.
   The homepage version is untouched. */

.guide-content .timeline {
  margin: 26px 0 34px;
}

.guide-content .t-step {
  background: var(--paper);
  border-color: var(--line);
}

.guide-content .t-step h3 {
  color: var(--ink);
}

.guide-content .t-step p {
  color: var(--ink-soft);
}

.guide-content .t-step .idx {
  margin-bottom: 16px;
}

@media (max-width:640px) {
  .guide-content-image,
  .guide-table-wrap {
    margin-top: 24px;
    margin-bottom: 28px;
  }

  .guide-content-image figcaption {
    padding: 10px 14px;
  }

  .guide-table th,
  .guide-table td {
    padding: 12px 14px;
  }
}

.guide-faq {
  margin-top: 24px;
}

.guide-next {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 54px;
}

/* Child-guide navigation for a hub guide (Smart TV, Android). Hub pages are
   the entry point for a family of device guides, so they carry a grid of
   cards that route the reader to the right child page instead of ending in a
   single "next" button. Two columns, so four cards form a balanced 2x2 block
   instead of wrapping a lone card onto a row of its own. */
.guide-children {
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

@media (max-width:640px) {
  .guide-children {
    grid-template-columns: 1fr;
  }
}

.guide-child {
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.guide-child:hover,
.guide-child:focus-visible {
  border-color: var(--gold-2);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(17, 17, 17, .08);
}

.guide-child:focus-visible {
  outline: 3px solid var(--gold-2);
  outline-offset: 2px;
}

.guide-child-tag {
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(230, 185, 77, .16);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.guide-child h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--ink);
}

.guide-child p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.guide-child-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  transition: gap .25s ease;
}

.guide-child-more svg {
  width: 16px;
  height: 16px;
}

.guide-child:hover .guide-child-more {
  gap: 12px;
}

.guide-child:hover .guide-child-more svg {
  transform: translateX(4px);
}

@media (max-width:640px) {
  .guide-hero {
    padding-top: 48px;
  }

  .guide-breadcrumb {
    margin-bottom: 26px;
  }

  .guide-hero h1 {
    font-size: 42px;
  }

  .guide-intro {
    font-size: 16px;
  }

  .guide-content {
    padding-top: 48px;
  }

  .guide-content h2 {
    font-size: 29px;
    margin-top: 44px;
  }
}

/* Guides hub */
.guides-hero {
  position: relative;
  overflow: hidden;
  margin-top: -92px;
  padding: 158px 0 0;
  background: var(--black);
  color: var(--white);
}

.guides-hero .glow-1,
.guides-hero .glow-2 {
  position: absolute;
  pointer-events: none;
}

.guides-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding-bottom: 54px;
  text-align: center;
}

.guides-hero .guide-breadcrumb {
  justify-content: center;
  margin-bottom: 34px;
  color: rgba(255, 255, 255, .58);
}

.guides-hero .guide-breadcrumb a:hover {
  color: var(--white);
}

.guides-hero .kicker {
  margin-bottom: 16px;
  color: var(--gold-1);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}

.guides-hero h1 {
  color: var(--white);
  font-size: clamp(42px, 6vw, 64px);
  line-height: 1.04;
  margin-bottom: 20px;
}

.guides-hero p {
  max-width: 620px;
  margin: 0 auto 22px;
  color: rgba(255, 255, 255, .62);
  font-size: 17px;
}

.guides-hero .guide-meta {
  justify-content: center;
  margin: 0 0 28px;
  color: var(--gold-1);
}

.guides-hero .hero-actions {
  justify-content: center;
}

.guides-library {
  padding-top: 84px;
  padding-bottom: 110px;
}

/* Two balanced columns. The featured card is a normal grid item that happens
   to sit a touch taller; the three device guides tile beneath/next to it. No
   fixed row spans, so the columns always end on the same line. */
.guides-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 24px;
}

/* Light cards, same language as .device-card / .channel-card: paper surface,
   hairline --line border, gold on hover, shared radius. */
.guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.guide-card:hover,
.guide-card:focus-within {
  border-color: var(--gold-2);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -26px rgba(184, 134, 43, 0.6);
}

/* Full-card click target: the whole card is one link, and the visible "Read
   guide" is only a styled <span>, so no <a> ever nests inside another <a>. */
.guide-card-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.guide-card-hit:focus-visible {
  outline: 3px solid var(--gold-2);
  outline-offset: 3px;
}

/* Image sits in a large 16:10 frame — noticeably bigger than the old 62px
   icon chip — and crops to fill like the site's other media cards. */
.guide-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--black);
  border-bottom: 1px solid var(--line);
}

.guide-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

/* Icon-only art (Android, Firestick) is contain-fit on a soft paper wash so
   the logo reads cleanly instead of a blown-up crop. */
.guide-card-media-fit {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #FFF7E6, var(--paper));
}

.guide-card-media-fit img {
  width: auto;
  height: 78%;
  max-width: 78%;
  object-fit: contain;
}

/* Android art ships on a white background, so it needs a hair of breathing
   room rather than touching a dark frame. */
.guide-card-media-pad img {
  height: 70%;
  border-radius: 12px;
}

.guide-card:hover .guide-card-media img {
  transform: scale(1.05);
}

/* Category tag floats over the image, replacing the old in-body kicker. */
.guide-card-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(11, 10, 7, 0.72);
  color: var(--gold-1);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.guide-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 26px 26px;
}

.guide-card-body h3 {
  font-size: 21px;
  line-height: 1.2;
  color: var(--ink);
}

.guide-card-body p {
  font-size: 14.5px;
  color: var(--ink-soft);
}

.guide-card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  transition: gap .22s ease, color .22s ease;
}

.guide-card-more svg {
  width: 17px;
  height: 17px;
  transition: transform .22s ease;
}

.guide-card:hover .guide-card-more {
  gap: 12px;
  color: var(--gold-3);
}

.guide-card:hover .guide-card-more svg {
  transform: translateX(4px);
}

/* The featured guide is the entry point, so it leads with a larger headline. */
.guide-card-featured .guide-card-body h3 {
  font-size: 25px;
}

/* The library now holds an overview row and a platform row, separated by a
   small heading. The platform tiles are smaller, so they tile three or four
   across instead of filling half the width each. */
.guides-subhead {
  margin: 52px 0 20px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px;
  color: var(--ink);
}

.guides-grid-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Let each tile size to its own content. The 1fr rows inherited from
     .guides-grid stretch the shorter cards, which turns square device icons
     into tall, badly cropped panels. */
  grid-auto-rows: auto;
}

.guides-grid-compact .guide-card-media {
  aspect-ratio: 16 / 10;
}

.guides-grid-compact .guide-card-media-pad img {
  max-height: 108px;
}

.guides-grid-compact .guide-card-body h3 {
  font-size: 17px;
}

.guides-grid-compact .guide-card-body p {
  font-size: 13.5px;
}

@media (max-width:1024px) {
  .guides-grid {
    gap: 20px;
  }

  .guides-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guides-subhead {
    margin-top: 42px;
  }
}

@media (max-width:760px) {
  .guides-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .guide-card-body h3,
  .guide-card-featured .guide-card-body h3 {
    font-size: 20px;
  }

  .guides-library {
    padding-top: 58px;
    padding-bottom: 76px;
  }
}

.channel-logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 16/9;
  overflow: hidden;
}

.channel-logo-frame img {
  display: block;
  width: auto;
  max-width: 72%;
  max-height: 62%;
  object-fit: contain;
}

/* Scrollable logo strip — decorative on index-style heroes */
.channel-strip {
  display: flex;
  gap: 28px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.channel-strip::-webkit-scrollbar {
  display: none;
}

.channel-strip img {
  height: 34px;
  width: auto;
  flex: none;
  opacity: .72;
  filter: grayscale(1) brightness(2.2);
  transition: opacity .2s ease, filter .2s ease;
}

.channel-strip img:hover {
  opacity: 1;
  filter: none;
}

/* ==========================================================================
   MOVIES & SERIES PAGE (scoped — does not affect existing pages)
   ========================================================================== */
.movies-page .movies-hero {
  position: relative;
  overflow: hidden;
  margin-top: -92px;
  padding: 158px 0 0;
  background: var(--black);
  color: var(--white);
}

.movies-page .movies-hero .glow-1,
.movies-page .movies-hero .glow-2 {
  position: absolute;
  pointer-events: none;
}

.movies-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px 54px;
  text-align: center;
}

.movies-hero .kicker,
.movies-page .section-head .kicker {
  color: var(--gold-1);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: 16px;
}

.movies-hero h1 {
  color: var(--white);
  font-size: clamp(42px, 6vw, 64px);
  line-height: 1.04;
  margin-bottom: 20px;
}

.movies-hero p {
  max-width: 620px;
  margin: 0 auto 30px;
  color: rgba(255, 255, 255, .62);
  font-size: 17px;
}

.movies-hero .hero-actions { justify-content: center; }

.movies-section {
  padding: 72px 0 74px;
  background: var(--white);
}

.movies-section-dark {
  background: var(--black);
  color: var(--white);
}

.movies-section-dark h2,
.movies-section-dark h3 { color: var(--white); }
.movies-section-dark .section-head p { color: rgba(255,255,255,.58); }
.movies-section-dark .swiper-head { border-color: rgba(255,255,255,.1); }

.movies-swiper-block { margin-top: 34px; }
.movies-section + .movies-section { padding-top: 58px; }
.movies-section .section-head { margin-bottom: 40px; }
.movies-section .swiper-head { margin-bottom: 20px; }

.movies-track { gap: 18px; padding: 4px 3px 14px; }

.poster-card {
  display: flex;
  flex-direction: column;
  width: clamp(145px, 16.7vw, 195px);
  aspect-ratio: 2 / 3;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--black);
  border: 1px solid rgba(18, 17, 9, .12);
  box-shadow: 0 12px 24px -18px rgba(0,0,0,.35);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.poster-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.poster-card::after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(11,10,7,.9));
  pointer-events: none;
}

.poster-card:hover,
.poster-card:focus-visible {
  transform: translateY(-4px) scale(1.025);
  border-color: var(--gold-2);
  box-shadow: 0 16px 30px -14px rgba(184,134,43,.48);
}

.poster-card:hover img { transform: scale(1.04); }
.poster-type,
.poster-title { position: absolute; z-index: 1; left: 14px; right: 10px; }
.poster-type { bottom: 43px; color: var(--gold-1); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.poster-title { bottom: 14px; color: var(--white); font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; font-weight: 700; line-height: 1.1; }

@media (max-width: 920px) {
  .poster-card { width: clamp(160px, 23vw, 180px); }
}

@media (max-width: 600px) {
  .movies-hero { padding-top: 136px; }
  .movies-hero-inner { padding: 0 20px 42px; }
  .movies-hero p { font-size: 15px; }
  .movies-section { padding: 54px 0 58px; }
  .movies-section .section-head { margin-bottom: 30px; }
  .poster-card { width: clamp(145px, 43vw, 165px); }
  .poster-title { font-size: 15px; }
}

/* ==========================================================================
   SPORTS PAGE (scoped — does not affect existing pages)
   ========================================================================== */
.sports-page .sports-hero {
  position: relative;
  overflow: hidden;
  margin-top: -92px;
  padding: 158px 0 0;
  background: var(--black);
  color: var(--white);
}

.sports-page .sports-hero .glow-1,
.sports-page .sports-hero .glow-2 {
  position: absolute;
  pointer-events: none;
}

.sports-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px 54px;
  text-align: center;
}

.sports-hero .kicker,
.sports-page .section-head .kicker {
  color: var(--gold-1);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: 16px;
}

.sports-hero h1 { color: var(--white); font-size: clamp(42px, 6vw, 64px); line-height: 1.04; margin-bottom: 20px; }
.sports-hero p { max-width: 650px; margin: 0 auto 30px; color: rgba(255,255,255,.62); font-size: 17px; }
.sports-hero .hero-actions { justify-content: center; }

.sports-section { padding: 72px 0 74px; background: var(--white); }
.sports-section-dark { background: var(--black); color: var(--white); }
.sports-section-dark h2, .sports-section-dark h3 { color: var(--white); }
.sports-section-dark .section-head p { color: rgba(255,255,255,.58); }
.sports-swiper-block { margin-top: 30px; }
.sports-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}
.sports-section .section-head { margin-bottom: 34px; }
.sports-section + .sports-section { padding-top: 58px; }

/* The sports strips reuse .channel-slide, but these images are mostly
   brand artwork rather than photographic stills. Forcing them into a
   16/10 crop with object-fit: cover cut the logos in half and the dark
   scrim swallowed what was left, so on this page the slide switches to
a   taller frame that shows the whole logo on its own dark panel, with the
   caption underneath it instead of floating over the artwork. */
.sports-page .swiper-track .channel-slide,
.sports-page .sports-card-grid .channel-slide {
  width: 232px;
  aspect-ratio: auto;
  border-radius: var(--radius-md);
  background: var(--black);
  display: flex;
  flex-direction: column;
}

.sports-page .swiper-track .channel-slide img,
.sports-page .sports-card-grid .channel-slide img {
  width: 100%;
  height: 132px;
  object-fit: contain;
  padding: 18px 22px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 222, 135, 0.09), transparent 62%),
    linear-gradient(180deg, #17150F, #0B0A07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* No scrim: the artwork sits in its own panel above the caption, so there
   is nothing to darken behind the text and the logos stay crisp. */
.sports-page .swiper-track .channel-slide::after,
.sports-page .sports-card-grid .channel-slide::after { content: none; }

.sports-page .swiper-track .channel-slide .caption,
.sports-page .sports-card-grid .channel-slide .caption {
  position: static;
  padding: 14px 16px 16px;
  background: var(--black);
}

.sports-page .swiper-track .channel-slide .cat,
.sports-page .sports-card-grid .channel-slide .cat {
  margin-bottom: 5px;
  color: var(--gold-2);
  font-weight: 800;
  letter-spacing: .07em;
}

.sports-page .swiper-track .channel-slide .name,
.sports-page .sports-card-grid .channel-slide .name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  line-height: 1.2;
}

@media (max-width: 600px) {
  .sports-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sports-page .swiper-track .channel-slide,
  .sports-page .sports-card-grid .channel-slide { width: 100%; }
  .sports-page .swiper-track .channel-slide img,
  .sports-page .sports-card-grid .channel-slide img { height: 104px; padding: 14px 16px; }
  .sports-page .swiper-track .channel-slide .caption,
  .sports-page .sports-card-grid .channel-slide .caption { padding: 12px 13px 14px; }
  .sports-page .swiper-track .channel-slide .name,
  .sports-page .sports-card-grid .channel-slide .name { font-size: 15px; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .sports-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sports-page .sports-card-grid .channel-slide { width: 100%; }
}

.sports-devices { padding: 70px 0 76px; background: var(--black); color: var(--white); }
.sports-devices h2 { color: var(--white); }

/* The device band is a dark section, so the shared .btn-ghost-light
   (dark ink on a light border) rendered as an unreadable empty pill.
   A dark-ghost button is the right pairing on black. */
.sports-devices .btn-ghost-light {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.16);
}

.sports-devices .btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 222, 135, 0.45);
  color: var(--gold-1);
}
.sports-devices .section-head p { color: rgba(255,255,255,.58); }
.sports-device-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 850px; margin: 0 auto; }
.sports-device-list span { border: 1px solid rgba(255,255,255,.14); border-radius: 100px; padding: 12px 20px; color: rgba(255,255,255,.72); font-size: 14px; font-weight: 700; }
.sports-device-action { justify-content: center; margin-top: 30px; }

@media (max-width: 600px) {
  .sports-hero { padding-top: 136px; }
  .sports-hero-inner { padding: 0 20px 42px; }
  .sports-hero p { font-size: 15px; }
  .sports-section { padding: 54px 0 58px; }
  .sports-section .section-head { margin-bottom: 30px; }
  .sports-device-list { gap: 8px; }
  .sports-device-list span { padding: 10px 14px; font-size: 12px; }
}

/* ==========================================================================
   CHANNELS PAGE (scoped — does not affect index.html)
   Every rule below is namespaced under .channels-page.
   ========================================================================== */

.channels-page .channels-hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  margin-top: -92px;
  padding: 158px 0 0;
  overflow: hidden;
}

.channels-page .channels-hero .glow-3 {
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(255, 222, 135, 0.22), transparent 70%);
  bottom: -320px;
  left: 50%;
  transform: translateX(-50%);
}

.channels-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 40px;
}

.channels-page .hero-eyebrow {
  margin-bottom: 22px;
}

.channels-page .channels-hero h1 {
  font-size: 50px;
  line-height: 1.06;
  color: var(--white);
  margin-bottom: 20px;
}

.channels-page .channels-hero p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 620px;
  margin: 0 auto 32px;
}

.channels-page .hero-actions {
  justify-content: center;
}

/* Decorative logo strip under the hero copy */
.channels-logo-strip {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 26px 0 34px;
}

.channels-strip-label {
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 18px;
}

/* Filter + search toolbar */
.channels-toolbar {
  background: var(--white);
  padding: 44px 0 8px;
}

.channels-search {
  max-width: 560px;
  margin: 0 auto 26px;
  position: relative;
}

.channels-search label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
  text-align: center;
}

.channels-search input {
  width: 100%;
  padding: 15px 22px 15px 50px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.channels-search input::placeholder {
  color: #A9A593;
}

.channels-search input:focus {
  outline: none;
  border-color: var(--gold-2);
  box-shadow: 0 0 0 4px rgba(230, 185, 77, 0.16);
}

.channels-search svg {
  position: absolute;
  left: 20px;
  bottom: 16px;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.channel-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.channel-filter button {
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.channel-filter button:hover {
  border-color: var(--gold-2);
  color: var(--ink);
}

.channel-filter button[aria-pressed="true"] {
  background: linear-gradient(100deg, var(--gold-1), var(--gold-2) 60%, var(--gold-3));
  border-color: transparent;
  color: var(--black);
  box-shadow: 0 8px 20px -10px rgba(184, 134, 43, 0.6);
}

/* Result counter */
.channels-count {
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 22px auto 0;
}

.channels-count strong {
  color: var(--ink);
}

/* Channel grid */
.channels-section {
  background: var(--white);
  padding: 30px 0 90px;
}

.channels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.channel-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.channel-card:hover,
.channel-card:focus-within {
  border-color: var(--gold-2);
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -22px rgba(184, 134, 43, 0.6);
}

.channel-card[hidden] {
  display: none;
}

/* The project's channel logos are mostly white artwork on transparent
   backgrounds (the same reason index.html renders its channel strip on
   black), so the card frame stays dark for legibility. */
.channel-card .channel-logo-frame {
  background: var(--black);
}

.channel-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.channel-card-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.25;
}

.channel-card-meta {
  display: flex;
  align-items: center;
  /* wrap, not space-between: on narrow cards (two columns on a phone)
     a long pair such as "International" + "Documentary" cannot fit on
     one line, and space-between would squeeze the second badge off the
     card edge. Wrapping drops it to its own line instead. */
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: auto;
}

.channel-card .channel-category {
  font-size: 11px;
}

/* Search / filter empty state */
.channels-empty {
  display: none;
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.channels-empty.visible {
  display: block;
}

.channels-empty h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.channels-empty p {
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: 20px;
}

/* Featured channels band (dark, reuses the gold gradient language) */
.channels-featured {
  background: var(--black);
  color: var(--white);
  padding: 78px 0;
  position: relative;
  overflow: hidden;
}

.channels-featured .glow {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(184, 134, 43, 0.28), transparent 70%);
  top: -220px;
  right: -160px;
}

.channels-featured-inner {
  position: relative;
  z-index: 1;
}

.channels-featured .section-head h2 {
  color: var(--white);
}

.channels-featured .section-head p {
  color: rgba(255, 255, 255, 0.55);
}

.channels-featured .section-head {
  margin-bottom: 44px;
}

.featured-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.featured-card {
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: border-color .2s ease, transform .2s ease;
}

.featured-card:hover {
  border-color: rgba(255, 222, 135, 0.4);
  transform: translateY(-3px);
}

.featured-logo {
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 14px;
  background: var(--black);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.featured-logo img {
  max-width: 76%;
  max-height: 66%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.featured-card h3 {
  font-size: 16px;
  color: var(--white);
  margin-bottom: 2px;
}

.featured-card span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}

/* SEO content section */
.channels-content {
  background: var(--paper);
  padding: 88px 0;
}

.channels-content .section-head {
  max-width: 660px;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.content-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--white);
  padding: 26px;
}

.content-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.content-card p {
  font-size: 14.5px;
  color: var(--ink-soft);
}

/* Gold accent line used as a section divider on the channels page */
.gold-line {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
  max-width: 220px;
  margin: 0 auto;
}

/* Device links section */
.channels-devices {
  background: var(--white);
  padding: 86px 0;
  text-align: center;
}

.device-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 6px;
}

.device-links a {
  font-size: 14px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

.device-links a:hover {
  border-color: var(--gold-2);
  color: var(--gold-3);
  transform: translateY(-2px);
}

/* Channels page responsive breakpoints */
@media (max-width:1200px) {
  .channels-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:1024px) {
  .content-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:900px) {
  .channels-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-row {
    grid-template-columns: 1fr;
  }

  .channels-page .channels-hero h1 {
    font-size: 38px;
  }
}

@media (max-width:768px) {
  .channels-toolbar {
    padding: 36px 0 8px;
  }
}

@media (max-width:600px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:480px) {
  .channels-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .channels-page .channels-hero h1 {
    font-size: 30px;
  }

  .channels-page .channels-hero p {
    font-size: 15.5px;
  }

  .channel-card-body {
    padding: 13px 14px 15px;
  }

  .channel-card-name {
    font-size: 14.5px;
  }

  /* Long category names ("International", "Kids & Family") plus a badge
     such as "Documentary" overflow the two-column cards at this width,
     so the labels are tightened and allowed to break a word rather than
     be clipped by the card's overflow: hidden. */
  .channel-card-meta {
    gap: 5px 8px;
  }

  .channel-card .channel-category {
    font-size: 10px;
    letter-spacing: .03em;
  }

  .channel-card .channel-badge {
    font-size: 9.5px;
    padding: 3px 8px;
  }

  .channel-card .channel-category,
  .channel-card .channel-badge {
    overflow-wrap: anywhere;
  }

  .channel-filter button {
    font-size: 12.5px;
    padding: 9px 16px;
  }
}

@media (max-width:375px) {
  .channels-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Contact page (.contact-page)
   Dark hero + two-column form/info layout. Scoped so it cannot affect the
   other pages that share this stylesheet.
   ========================================================================== */
.contact-hero {
  position: relative;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  margin-top: -92px;
  padding: 150px 0 0;
  text-align: center;
}

.contact-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding-bottom: 70px;
}

.contact-hero .kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-1);
  margin-bottom: 16px;
}

.contact-hero h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  color: var(--white);
  font-size: clamp(42px, 6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

.contact-hero p.lead {
  max-width: 620px;
  margin: 0 auto 34px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 17.5px;
}

.contact-hero .hero-actions {
  justify-content: center;
}

.contact-section {
  position: relative;
  overflow: hidden;
  padding: 84px 0 96px;
}

.contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 54px;
  align-items: start;
  max-width: 1080px;
}

.contact-info h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 30px;
  line-height: 1.15;
  margin-bottom: 14px;
}

.contact-info > p {
  color: var(--ink-soft);
  margin-bottom: 28px;
}

.contact-list {
  list-style: none;
  display: grid;
  gap: 18px;
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-list-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(184, 134, 43, 0.24);
  color: var(--gold-3);
  box-shadow: 0 8px 20px -16px rgba(92, 63, 12, 0.75);
}

.contact-list-icon svg {
  width: 20px;
  height: 20px;
}

.contact-list strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

.contact-list span,
.contact-list a {
  font-size: 14.5px;
  color: var(--ink-soft);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-list a:hover {
  color: var(--gold-3);
}

.contact-form {
  background: linear-gradient(145deg, #28200d 0%, #17130a 100%);
  border: 1px solid rgba(255, 222, 135, 0.32);
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: 0 24px 48px -28px rgba(63, 40, 4, 0.7), 0 0 0 8px rgba(255, 255, 255, 0.3);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-field {
  margin-bottom: 18px;
}

.form-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold-1);
  margin-bottom: 8px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(184, 134, 43, 0.24);
  background: rgba(255, 253, 247, 0.98);
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.form-field textarea {
  resize: vertical;
  min-height: 130px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #A9A593;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--gold-2);
  box-shadow: 0 0 0 4px rgba(255, 222, 135, 0.2), 0 8px 22px -14px rgba(255, 222, 135, 0.7);
}

.contact-form .btn {
  width: 100%;
  border: none;
}

.form-note {
  margin-top: 14px;
  font-size: 12.5px;
  color: rgba(255, 244, 210, 0.64);
  text-align: center;
}

@media (max-width:860px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-hero {
    padding: 108px 0 0;
  }

  .contact-hero-inner {
    padding-bottom: 54px;
  }

  .contact-hero h1 {
    font-size: 40px;
  }
}

@media (max-width:640px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding: 26px 22px;
  }
}