/* A white matchday panel within the cinematic sports chapter. */
.sports-section .matchday {
  --text: #14213d;
  --muted: #53627b;
  --line: #d9e1ef;
  color: var(--text);
  color-scheme: light;
  background: #fff;
  border-color: #e0e5ef;
  box-shadow: 0 18px 48px #0000001c, inset 0 1px 0 #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sports-section .matchday .eyebrow {
  color: #6250a1;
}

.sports-section .matchday h3,
.sports-section .matchday .match-score {
  color: #14213d;
}

.sports-section .matchday .feed-status,
.sports-section .matchday .match-topline,
.sports-section .matchday .match-league,
.sports-section .matchday .match-state,
.sports-section .matchday .match-bottom,
.sports-section .matchday .match-timezone,
.sports-section .matchday .match-footnote {
  color: #586780;
}

.sports-section .matchday .match-filters button {
  color: #52617b;
}

.sports-section .matchday .match-filters button:hover {
  color: #3e3790;
  background: #f0f2fc;
}

.sports-section .matchday .match-filters button.active,
.sports-section .matchday .match-filters button[aria-pressed="true"] {
  color: #423398;
  background: #eeedfc;
  border-color: #c9c7e9;
}

.sports-section .matchday :focus-visible {
  outline: 2px solid #6548c5;
  outline-offset: 3px;
}

.sports-section .matchday .match-card {
  background: #f8faff;
  border-color: #dce4f1;
}

.sports-section .matchday .match-state.is-live {
  color: #08734e;
  background: #e1f5ec;
}

.sports-section .matchday .match-team {
  color: #283b5a;
}

.sports-section .matchday .match-team-fallback {
  color: #39517d;
  background: #e4eaf6;
}

.sports-section .matchday .match-bottom {
  border-color: #e1e7f2;
}

.sports-section .matchday .match-footnote a {
  color: #3653ae;
}

.sports-section .matchday .match-footnote a:hover {
  color: #7040b7;
}

.sports-section .matchday .match-retry {
  color: #3e3790;
  background: #f0f2fc;
  border-color: #cbd4e7;
}

.sports-section .matchday .match-retry:hover {
  background: #e8eafb;
}

.sports-section .matchday .match-refresh {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid #c9cfe0;
  border-radius: 7px;
  color: #423398;
  background: #f0f2fc;
  font-size: 8px;
  letter-spacing: .2px;
  transition: .2s;
}

.sports-section .matchday .match-refresh:hover {
  color: #2f247d;
  background: #e8eafb;
}

.sports-section .matchday .match-refresh:disabled {
  cursor: wait;
  opacity: .5;
}

.sports-section .matchday .feed-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* White editorial chapters; sports and the closing invitation remain cinematic. */
:is(.entertainment-section, .why-section, .devices-section, .plans-section, .setup-section, .faq-section, .site-footer) {
  --text: #14213d;
  --muted: #58647d;
  --subtle: #66728b;
  --line: #dce2ee;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: max(56px, calc((100% - 1280px) / 2));
  color: var(--text);
  color-scheme: light;
}

:is(.entertainment-section, .why-section, .devices-section, .plans-section, .setup-section, .faq-section, .site-footer) {
  background: #fff;
}

:is(.entertainment-section, .why-section, .devices-section, .plans-section, .setup-section, .faq-section, .site-footer) .eyebrow {
  color: #6250a1;
}

:is(.entertainment-section, .why-section, .devices-section, .plans-section, .setup-section, .faq-section, .site-footer) .text-link {
  color: #3653ae;
}

:is(.entertainment-section, .why-section, .devices-section, .plans-section, .setup-section, .faq-section, .site-footer) .text-link:hover {
  color: #7040b7;
}

:is(.entertainment-section, .why-section, .devices-section, .plans-section, .setup-section, .faq-section, .site-footer) :focus-visible {
  outline: 2px solid #6548c5;
  outline-offset: 4px;
}

:is(.entertainment-section, .why-section, .devices-section, .plans-section, .setup-section, .faq-section, .site-footer) .gradient-text {
  background-image: linear-gradient(105deg, #3553c8 0%, #7044c3 72%, #903baf 100%);
}

/* A bright browsing surface with cinematic artwork and white poster captions. */
.entertainment-section {
  overflow-x: clip;
  padding-bottom: 72px;
}

.entertainment-section .serif-accent {
  color: #7653a8;
}

.entertainment-section .circle-button {
  color: #3c4f82;
  background: #f0f3fb;
  border-color: #d8dfed;
  box-shadow: inset 0 1px 0 #fff;
}

.entertainment-section .circle-button:hover {
  color: #6242b9;
  background: #e8e7f8;
  border-color: #bab3e2;
}

.entertainment-section .content-tabs {
  border-color: #dce2ee;
  overscroll-behavior-inline: contain;
}

.entertainment-section .content-tabs button {
  color: #616b82;
}

.entertainment-section .content-tabs button:hover {
  color: #3e3294;
}

.entertainment-section .content-tabs button.active,
.entertainment-section .content-tabs button[aria-selected="true"] {
  color: #5d3ca8;
}

.entertainment-section .content-tabs button.active::after {
  background: linear-gradient(90deg, #4e62d2, #8954c9);
}

.entertainment-section .poster-row {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 3px;
}

.entertainment-section .poster-card {
  color: #fff;
  background-color: #101626;
  border-color: #15234724;
  box-shadow: 0 8px 25px #16254113;
}

.entertainment-section .poster-card:hover {
  border-color: #7472b1;
  box-shadow: 0 14px 30px #15234724;
}

.entertainment-section .poster-title,
.entertainment-section .poster-meta > span {
  color: #fff;
}

.entertainment-section .poster-title em {
  color: #eee7fa;
}

.entertainment-section .poster-topline {
  color: #e6e6f0;
}

.entertainment-section .poster-meta {
  color: #d0d7e8;
}

.entertainment-section .content-note {
  color: #626d84;
}

.entertainment-section .content-note em {
  color: #293e70;
}

/* Quiet benefit rows retain the blue/purple brand accents. */
.why-section {
  padding-top: 65px;
  padding-bottom: 90px;
  border-top: 1px solid #edf0f6;
}

.why-section .benefit {
  border-color: #dce3ef;
}

.why-section .benefit-icon {
  color: #5d50ab;
  background: linear-gradient(140deg, #edf2fc, #f1ecfa);
  border-color: #dfe4f2;
}

.why-section .benefit-number {
  color: #65718a;
}

.why-section .benefit p {
  color: #5c6982;
}

/* The existing product scene remains a dark glass island on white. */
.devices-section .device-scene {
  color: #f5f7ff;
  background: radial-gradient(ellipse at 20% 10%, #3b4f854d, transparent 65%),
    linear-gradient(140deg, #172747, #251b3b);
  border-color: #acb6d84d;
  box-shadow: 0 22px 50px #30285720, inset 0 1px 0 #ffffff14;
}

.devices-section .device-scene::after {
  background: linear-gradient(135deg, #c7d5ff9c, transparent 26%, transparent 78%, #a3a2e873);
}

.devices-section .device-copy .section-description {
  color: #56617a;
}

.devices-section .device-tabs {
  border-color: #d2d7e6;
}

.devices-section .device-tabs button {
  color: #5b657f;
}

.devices-section .device-tabs button:hover {
  color: #423c94;
  background: #e7e5f5;
}

.devices-section .device-tabs button.active,
.devices-section .device-tabs button[aria-selected="true"] {
  color: #583ca2;
  border-bottom-color: #7054bd;
}

.devices-section .device-description h3 {
  color: #25345b;
}

.devices-section .device-description p {
  color: #5b6680;
}

.devices-section .device-fineprint {
  color: #5c687f;
}

/* Clear plan comparison, with one deep-blue family recommendation. */
.plans-section::before {
  display: none;
}

.plans-section .plans-intro > p {
  color: #5b6680;
}

.plans-section .duration-switch {
  color: #344463;
  background: #eceff7;
  border-color: #d8deed;
  box-shadow: inset 0 1px 0 #fff;
}

.plans-section .duration-switch button {
  color: #5b6680;
}

.plans-section .duration-switch button:hover {
  background: #e0e4f2;
  color: #3b4393;
}

.plans-section .duration-switch button.active,
.plans-section .duration-switch button[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(115deg, #4564cf, #7951bf);
  box-shadow: 0 2px 7px #4657a928, inset 0 1px 0 #ffffff26;
}

.plans-section .offer-tag {
  color: #69429e;
}

.plans-section .price-card {
  color: #172544;
  background: #fff;
  border-color: #dce3f1;
  box-shadow: 0 10px 35px #20365d07, inset 0 1px 0 #fff;
}

.plans-section .plan-icon {
  color: #5b56a9;
  border-color: #e0e5f1;
  background: #f1f3fb;
}

.plans-section .plan-eyebrow {
  color: #68728b;
}

.plans-section .plan-description,
.plans-section .plan-duration {
  color: #5d6983;
}

.plans-section .plan-amount > span {
  color: #5e6d8b;
}

.plans-section .plan-regular {
  color: #68758b;
}

.plans-section .plan-saving {
  color: #67509b;
}

.plans-section .plan-screens,
.plans-section .screen-stepper {
  color: #435475;
}

.plans-section .plan-screens .icon {
  color: #6372ab;
}

.plans-section .screen-stepper button {
  color: #43548d;
  background: #eff2fa;
  border-color: #d6ddeb;
}

.plans-section .screen-stepper button:hover:not(:disabled) {
  background: #e3e7f6;
  border-color: #a5b0d7;
}

.plans-section .screen-stepper button:disabled {
  color: #8a94a9;
  background: #f4f6fa;
  opacity: .55;
  cursor: not-allowed;
}

.plans-section .screen-stepper output {
  color: #20345e;
}

.plans-section .button-plan {
  color: #38549e;
  background: #eef2fc;
  border-color: #d5dff4;
}

.plans-section .button-plan:hover {
  color: #503a9e;
  background: #e3e9fa;
  border-color: #aab8e1;
}

.plans-section .plan-features {
  border-color: #e2e7f1;
}

.plans-section .plan-features li {
  color: #5e6d87;
}

.plans-section .plan-features .icon {
  color: #6076af;
}

.plans-section .plan-per-month {
  color: #64718b;
}

.plans-section .price-card.price-featured {
  --text: #f6f8ff;
  --muted: #c4cee9;
  color: #f6f8ff;
  background: radial-gradient(ellipse at 12% 0%, #5067ba40, transparent 72%),
    linear-gradient(145deg, #202d55, #29214c);
  border-color: #7771b5;
  box-shadow: 0 14px 40px #33266322, inset 0 1px 0 #ced8ff26;
}

.plans-section .price-featured .plan-recommendation {
  color: #fff;
  background: linear-gradient(110deg, #526ad6, #8557c5);
  box-shadow: 0 0 0 4px #fff;
}

.plans-section .price-featured .plan-icon {
  color: #d5deff;
  border-color: #a9b9ee33;
  background: #b0bfff12;
}

.plans-section .price-featured .plan-eyebrow,
.plans-section .price-featured .plan-description,
.plans-section .price-featured .plan-duration,
.plans-section .price-featured .plan-features li {
  color: #c5cfe6;
}

.plans-section .price-featured .plan-amount > span,
.plans-section .price-featured .plan-saving,
.plans-section .price-featured .plan-screens {
  color: #dce3fc;
}

.plans-section .price-featured .plan-regular,
.plans-section .price-featured .plan-per-month {
  color: #b4c1df;
}

.plans-section .price-featured .plan-screens .icon,
.plans-section .price-featured .plan-features .icon {
  color: #b4c8ff;
}

.plans-section .price-featured .plan-features {
  border-color: #b2c3f12e;
}

.plans-section .price-featured .button-primary {
  color: #fff;
}

.plans-section .pricing-footnote {
  color: #626f88;
}

.plans-section .pricing-footnote > .icon {
  color: #5f73a6;
}

.plans-section .payments > span:first-child,
.plans-section .payment-local {
  color: #67718b;
}

.plans-section .payment-orange {
  color: #b84917;
}

.plans-section .payment-afri {
  color: #28618e;
}

.plans-section .payment-afri > span,
.plans-section .payment-local b {
  color: #576781;
}

.plans-section .payment-local {
  border-color: #d4dceb;
}

/* Light, legible support content before the dark closing invitation. */
.faq-section .faq-intro > p {
  color: #5c6881;
}

.faq-section .faq-list details,
.faq-section .faq-list details:first-child {
  border-color: #dce2ee;
}

.faq-section .faq-list summary {
  color: #283858;
}

.faq-section .faq-list summary:hover,
.faq-section .faq-list details[open] summary {
  color: #6241a6;
}

.faq-section .faq-list summary > span {
  color: #7060ad;
}

.faq-section .faq-list details > p {
  color: #5b6781;
}

/* A white category strip cleanly separates the hero from the sports chapter. */
.brand-ribbon {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: max(56px, calc((100% - 1280px) / 2));
  color: #56617c;
  background: #fff;
  border-color: #e7ebf3;
}

.brand-ribbon i {
  background: #9d90c8;
}

/* Setup guidance uses the same white canvas as the surrounding chapters. */
.setup-section {
  border-color: #e8ecf4;
}

.setup-section .button-glass {
  color: #3e52a1;
  background: #f0f3fc;
  border-color: #d7dfef;
  box-shadow: inset 0 1px 0 #fff;
}

.setup-section .button-glass:hover {
  color: #6241a6;
  background: #e9eafa;
  border-color: #b9b4db;
}

.setup-section .steps article {
  border-color: #dce3ef;
}

.setup-section .step-number {
  color: #6b55a7;
}

.setup-section .steps h3 {
  color: #263757;
}

.setup-section .steps p {
  color: #5b6881;
}

/* A bright footer keeps the final invitation as the second dark chapter. */
.site-footer {
  padding-top: 54px;
  border-top: 1px solid #e5eaf3;
}

.site-footer .footer-main {
  border-color: #dfe5ef;
}

.site-footer .footer-main > div:first-child > p,
.site-footer .footer-links {
  color: #566580;
}

.site-footer .footer-location,
.site-footer .footer-contact > span {
  color: #66728b;
}

.site-footer .footer-contact > a {
  color: #2b426e;
}

.site-footer .footer-bottom,
.site-footer .legal-trigger,
.site-footer .legal-note {
  color: #63708a;
}

.site-footer .back-top {
  color: #415b9c;
}

.site-footer .footer-links a:hover,
.site-footer .footer-contact > a:hover,
.site-footer .legal-trigger:hover,
.site-footer .back-top:hover {
  color: #6845ab;
}

.site-footer .footer-location .status-dot {
  background: #218766;
  box-shadow: none;
}

@media (max-width: 1180px) {
  .brand-ribbon {
    margin-inline: 0;
    padding-inline: 36px;
  }

  :is(.entertainment-section, .why-section, .devices-section, .plans-section, .setup-section, .faq-section, .site-footer) {
    padding-inline: 36px;
  }
}

@media (max-width: 600px) {
  .sports-section .matchday .feed-controls {
    gap: 7px;
  }

  .sports-section .matchday .match-refresh {
    min-width: 31px;
    min-height: 31px;
    justify-content: center;
    padding: 6px;
  }

  .sports-section .matchday .match-refresh span {
    display: none;
  }

  .brand-ribbon {
    margin-inline: 0;
    padding-inline: 20px;
  }

  :is(.entertainment-section, .why-section, .devices-section, .plans-section, .setup-section, .faq-section, .site-footer) {
    padding-inline: 20px;
  }

  .entertainment-section {
    padding-bottom: 54px;
  }

  .entertainment-section .section-heading {
    gap: 8px;
  }

  .entertainment-section .section-heading > div:first-child {
    min-width: 0;
  }

  .entertainment-section h2 {
    font-size: clamp(30px, 8vw, 35px);
  }

  .entertainment-section .carousel-nav {
    gap: 6px;
    flex-shrink: 0;
  }

  .entertainment-section .circle-button {
    width: 38px;
    height: 38px;
  }

  .entertainment-section .content-tabs {
    max-width: calc(100% + 20px);
    margin-inline: 0 -20px;
    padding-inline: 0 20px;
    gap: 23px;
  }

  .entertainment-section .content-tabs button {
    font-size: 11px;
    min-height: 44px;
  }

  .entertainment-section .poster-row {
    width: auto;
    max-width: calc(100% + 20px);
    margin-inline: 0 -20px;
    padding-inline: 0 20px;
    scroll-padding-inline: 0;
  }

  .entertainment-section .content-note {
    font-size: 11px;
    line-height: 1.8;
  }

  .entertainment-section .content-note .text-link {
    font-size: 11px;
    min-height: 35px;
  }

  .why-section {
    padding-top: 52px;
    padding-bottom: 59px;
  }

  .why-section .benefit p {
    font-size: 11px;
  }

  .devices-section .device-tabs button {
    min-height: 44px;
  }

  .devices-section .device-description p {
    font-size: 12px;
  }

  .devices-section .device-fineprint {
    font-size: 10px;
  }

  .plans-section .duration-switch button {
    min-height: 40px;
  }

  .plans-section .plan-eyebrow {
    color: #65718b;
  }

  .plans-section .price-featured .plan-eyebrow {
    color: #c5cfe6;
  }

  .plans-section .plan-description,
  .plans-section .plan-features li {
    font-size: 11px;
  }

  .plans-section .plan-saving,
  .plans-section .plan-per-month,
  .plans-section .pricing-footnote {
    font-size: 10px;
  }

  .plans-section .screen-stepper button {
    width: 40px;
    height: 40px;
  }

  .plans-section .payments {
    gap: 18px;
  }

  .faq-section .faq-list details > p {
    font-size: 12px;
  }
}