/* Keel TV website. Plain CSS, no build step.
   1. Tokens and base   2. Header   3. Sections and type   4. Buttons
   5. Hero   6. Carousel   7. Google TV   8. Privacy   9. Tabs
   10. Feature grid, FAQ, closing, footer   11. TV and remote   12. App screens */

/* ---------- 1. Tokens and base ---------- */

:root {
  --ink: #101010;
  --white: #fff;
  --parchment: #f5f5f7;
  --elevated: #272729;
  --blue: #0071e3;
  --blue-hover: #0066cc;
  --green: #30a46c;
  --amber: #feb85c;
  --brand-blue: #26a5e4;
  --brand-yellow: #fcb30e;

  --section: 80px;
  --section-gap: 48px;
  --grid-gap: 20px;
  --card-radius: 16px;
  --content-radius: 16px;
  --card-lg: 24px;
  --card-md: 24px;
  --card-hero: 420px;
  --header-h: 60px;
  --ease-rise: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 640px) {
  :root {
    --section: 96px;
    --section-gap: 80px;
    --grid-gap: 24px;
    --card-radius: 20px;
    --content-radius: 20px;
    --card-lg: 48px;
    --card-md: 32px;
    --card-hero: 460px;
  }
}

@media (min-width: 1024px) {
  :root {
    --section: 144px;
    --section-gap: 96px;
    --card-radius: 32px;
    --card-lg: 64px;
    --card-md: 48px;
    --card-hero: 640px;
    --header-h: 70px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

svg {
  display: block;
}

.icon {
  fill: currentColor;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

::selection {
  background: rgb(38 165 228 / 0.28);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.container {
  width: min(100%, 1240px);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---------- 2. Header ---------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--ink);
  transition: color 0.2s;
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(255 255 255 / 0.8);
  box-shadow: 0 1px 1px rgb(16 16 16 / 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.2s, background-color 0.2s;
}

.header.is-scrolled::before {
  opacity: 1;
}

.header.is-dark {
  color: var(--white);
}

.header.is-dark::before {
  background: rgb(0 0 0 / 0.8);
}

.header-bar {
  width: min(100% - 40px, 1180px);
  height: var(--header-h);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1;
}

.brand svg {
  width: 36px;
  height: 36px;
}

.nav {
  display: none;
  align-items: center;
  gap: 40px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.nav a {
  transition: opacity 0.15s;
}

.nav a:hover {
  opacity: 0.6;
}

/* On small screens the button sits beside the menu icon. */
.header-cta {
  margin-left: auto;
  margin-right: 8px;
}

.nav-button {
  display: flex;
  width: 40px;
  height: 40px;
  margin-right: -10px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
}

.nav-button span {
  display: flex;
  width: 20px;
  height: 12px;
  flex-direction: column;
  justify-content: space-between;
}

.nav-button i {
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 96px 20px 40px;
  background: var(--ink);
  color: var(--white);
  font-size: 1.25rem;
  letter-spacing: 0.2px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}

.menu a {
  padding-block: 8px;
}

.menu .btn {
  margin-top: 40px;
  align-self: center;
  width: 270px;
}

#nav-toggle:checked ~ .menu {
  visibility: visible;
  opacity: 1;
  transform: none;
}

#nav-toggle:checked ~ .header {
  color: var(--white);
}

#nav-toggle:checked ~ .header::before {
  opacity: 0;
}

#nav-toggle:checked ~ .header .nav-button i:first-child {
  transform: translateY(5px) rotate(45deg);
}

#nav-toggle:checked ~ .header .nav-button i:last-child {
  transform: translateY(-5px) rotate(-45deg);
}

#nav-toggle:focus-visible ~ .header .nav-button {
  outline: 2px solid var(--blue);
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
  }

  .header-cta {
    margin: 0;
  }

  .nav-button,
  .menu {
    display: none;
  }
}

/* ---------- 3. Sections and type ---------- */

.section {
  --page: var(--white);
  --text: var(--ink);
  --text-2: rgb(16 16 16 / 0.6);
  --fill: rgb(16 16 16 / 0.08);
  --card: var(--parchment);
  padding-block: var(--section);
  background: var(--page);
  color: var(--text);
}

.section[data-theme="subtle"] {
  --page: var(--parchment);
  --card: var(--white);
}

.section[data-theme="dark"] {
  --page: var(--ink);
  --text: var(--white);
  --text-2: rgb(255 255 255 / 0.8);
  --fill: rgb(255 255 255 / 0.16);
  --card: var(--elevated);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.intro {
  width: 100%;
  max-width: 840px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.display,
.heading-xl,
.heading-l {
  font-weight: 700;
  letter-spacing: 0.6px;
  text-wrap: balance;
}

.display {
  font-size: 2.5rem;
  line-height: 2.5rem;
}

/* Every section heading is a heading-xl, so only the hero's h1 is set larger. */
.heading-xl {
  font-size: 2rem;
  line-height: 2.125rem;
}

.heading-l {
  font-size: 1.75rem;
  line-height: 2rem;
}

.lead {
  font-size: 1.25rem;
  line-height: 1.75rem;
  letter-spacing: 0.3px;
  color: var(--text-2);
  text-wrap: pretty;
}

.body {
  font-size: 1.125rem;
  line-height: 1.625rem;
  letter-spacing: -0.5px;
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .display {
    font-size: 3.25rem;
    line-height: 3.25rem;
  }

  .heading-xl {
    font-size: 2.75rem;
    line-height: 2.875rem;
  }

  .heading-l {
    font-size: 2rem;
    line-height: 2.25rem;
  }

  .lead {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

@media (min-width: 1024px) {
  .display {
    font-size: 3.75rem;
    line-height: 3.875rem;
  }

  .heading-xl {
    font-size: 3.375rem;
    line-height: 3.5rem;
  }

  .heading-l {
    font-size: 2.5rem;
    line-height: 2.625rem;
  }
}

/* Reveal on scroll. Content is only hidden when the script is there to reveal it. */
.js .rise {
  opacity: 0.01;
  translate: 0 30px;
}

.js .rise[data-revealed] {
  opacity: 1;
  translate: none;
  animation: rise-fade 0.9s var(--ease-rise) backwards, rise-move 0.7s var(--ease-rise) backwards;
}

@keyframes rise-fade {
  from { opacity: 0.01; }
}

@keyframes rise-move {
  from { translate: 0 30px; }
}

/* ---------- 4. Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-width: 180px;
  padding-inline: 32px;
  border-radius: 999px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1;
  white-space: nowrap;
  background: var(--blue);
  color: var(--white);
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.btn:hover {
  background: var(--blue-hover);
}

.btn-outline {
  background: none;
  color: var(--blue);
  box-shadow: inset 0 0 0 1.5px var(--blue);
}

.btn-outline:hover {
  background: none;
  color: var(--blue-hover);
  box-shadow: inset 0 0 0 1.5px var(--blue-hover);
}

.btn-brand {
  background: none;
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--brand-blue);
}

.btn-brand:hover {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--brand-yellow);
}

.btn-small {
  height: 36px;
  min-width: 0;
  padding-inline: 20px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.4px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

/* On a phone the buttons stack, so they share one width instead of each hugging its label. */
@media (max-width: 639px) {
  .actions {
    flex-direction: column;
    width: min(100%, 320px);
  }
}

/* ---------- 5. Hero ---------- */

.hero {
  padding-top: calc(var(--section) + var(--header-h) - 40px);
  overflow-x: clip;
}

.js .hero-copy {
  animation: fade-in 0.6s ease-out 0.1s backwards;
}

.js .hero-stage {
  animation: fade-in 1.2s linear 0.1s backwards, settle 1.1s ease-out 0.1s backwards;
}

@keyframes fade-in {
  from { opacity: 0.01; }
}

@keyframes settle {
  from { scale: 1.1; }
}

.hero-stage {
  position: relative;
  container-type: inline-size;
  padding-inline: 4%;
}

.hero-stage .remote {
  position: absolute;
  right: 0.5%;
  bottom: 0;
  width: 1em;
  font-size: 10cqw;
}

/* Under the buttons it reassures, so the headline is the first thing in the hero. */
.hero-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--text-2);
}

.hero-note svg {
  width: 18px;
  height: 18px;
  color: var(--green);
}

.hero-proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.hero-proof p {
  max-width: 560px;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.625rem;
  letter-spacing: -0.4px;
  text-wrap: balance;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 40px;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -0.26px;
  color: rgb(16 16 16 / 0.6);
}

.badges li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.badges svg {
  width: 18px;
  height: 18px;
}

@media (min-width: 640px) {
  .hero-proof p {
    font-size: 1.375rem;
    line-height: 1.875rem;
  }
}

/* A play button over the hero TV swaps its mock screen for the demo video. */
.tv-play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 1;
  display: none;
  align-items: center;
  gap: 0.4em;
  padding: 0.7em 1.3em 0.7em 1em;
  border-radius: 999px;
  font-size: clamp(0.875rem, 1.8cqw, 1.25rem);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 0.5em 1.5em rgb(0 0 0 / 0.35);
  transition: scale 0.15s;
}

.js .tv-play {
  display: inline-flex;
}

.tv-play:hover {
  scale: 1.05;
}

.tv-play svg {
  width: 1.4em;
  height: 1.4em;
}

.tv-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

/* The remote overlaps the screen's corner, so it steps behind the TV to clear the player's controls. */
.hero-stage:has(.tv-video:not([hidden])) .remote {
  z-index: 0;
}

/* ---------- 6. Carousel ---------- */

.carousel-track {
  --edge: calc((100% - min(100%, 1240px)) / 2 + 20px);
  display: flex;
  gap: var(--grid-gap);
  padding-inline: var(--edge);
  scroll-padding-inline: var(--edge);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

.carousel-track > li {
  flex: none;
  width: 100%;
  scroll-snap-align: start;
}

.card {
  display: flex;
  flex-direction: column;
  height: var(--card-hero);
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--white);
  color: var(--ink);
}

.card-amber {
  background: var(--amber);
}

.card-copy {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--card-lg) var(--card-md) 0;
  text-align: center;
}

.card-copy p {
  max-width: 720px;
  color: rgb(16 16 16 / 0.6);
}

.card-media {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  padding: var(--card-md) var(--card-md) 0;
}

/* The TV is sized from the height the card leaves it, so it never crops sideways. */
.card-media .tv {
  width: auto;
  height: 118%;
  aspect-ratio: 16 / 9.62;
  max-width: 100%;
}

/* Copy under the picture: the TV stands fully inside the card. */
.card-reverse {
  flex-direction: column-reverse;
}

.card-reverse .card-copy {
  padding: 0 var(--card-md) var(--card-lg);
}

.card-reverse .card-media {
  container-type: size;
  align-items: flex-end;
  padding: var(--card-md);
}

/* As large as the space allows on whichever side runs out first, so it sits right on its copy. */
.card-reverse .card-media .tv {
  width: min(100cqw, 100cqh * 16 / 9.62);
  height: auto;
}

@media (min-width: 640px) {
  .card-split {
    flex-direction: row;
    align-items: center;
  }

  .card-split .card-copy {
    width: 38%;
    align-items: flex-start;
    padding: var(--card-lg);
    padding-right: 0;
    text-align: left;
  }

  .card-split .card-media {
    align-self: stretch;
    align-items: center;
    padding: var(--card-md);
  }

  .card-split .card-media .tv {
    width: 100%;
    height: auto;
  }
}

.carousel-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 48px;
}

.dots {
  grid-column: 2;
  display: flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--fill);
}

.dots button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

.dots button::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(16 16 16 / 0.12);
  transition: background-color 0.2s;
}

.dots button[aria-current="true"]::before {
  background: rgb(16 16 16 / 0.6);
}

.arrows {
  justify-self: end;
  display: none;
  gap: 8px;
}

.arrows button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fill);
  color: rgb(16 16 16 / 0.6);
  transition: color 0.15s;
}

.arrows button:disabled {
  color: rgb(16 16 16 / 0.12);
  cursor: default;
}

.arrows svg {
  width: 14px;
  height: 14px;
}

@media (min-width: 640px) {
  .arrows {
    display: flex;
  }
}

/* ---------- 7. Google TV ---------- */

/* Keeps the glow behind the tiles from bleeding into the section above. */
#google-tv {
  overflow: clip;
}

.gtv-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.tiles {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 22px);
}

.tiles::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 120%;
  translate: -50% -50%;
  border-radius: 50%;
  background: #0b4a78;
  filter: blur(80px);
  pointer-events: none;
}

.tile {
  position: relative;
  width: clamp(48px, 11vw, 84px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 24%;
  background: #1d1d1f;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  color: var(--white);
}

.tile svg {
  width: 46%;
  height: 46%;
}

.tile-mark {
  width: clamp(72px, 17vw, 128px);
  background: linear-gradient(160deg, #16181d, #0b0c0f);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 0 60px rgb(38 165 228 / 0.35);
}

.tile-mark img {
  width: 62%;
  height: auto;
}







.gtv-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-lg);
}

.gtv-bottom .tv {
  max-width: 1000px;
}

/* ---------- 8. Privacy ---------- */

.privacy {
  padding-bottom: 0;
  overflow: hidden;
}

.shield {
  width: 72px;
  height: 86px;
}

.fan {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: var(--section-gap);
  margin-bottom: -60px;
}

.fan-row {
  display: flex;
  gap: 20px;
  width: max-content;
  margin-left: 50%;
  translate: -50% 0;
}

.fan-row:nth-child(2) {
  translate: calc(-50% + 118px) 0;
}

.note {
  position: relative;
  flex: none;
  width: 216px;
  height: 200px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 0 0 1px rgb(16 16 16 / 0.06), 0 8px 24px rgb(16 16 16 / 0.08);
  font-size: 12px;
  line-height: 17px;
}

.note header {
  padding: 8px 12px 9px;
  color: var(--white);
  background: var(--tone, var(--blue));
  font-weight: 600;
  line-height: 15px;
}

.note header small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  opacity: 0.8;
}

.note-body {
  padding: 10px 12px;
  color: rgb(16 16 16 / 0.75);
}

.note-body b {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: rgb(16 16 16 / 0.45);
}

.note-body b:first-child {
  margin-top: 0;
}

.note-body li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-block: 3px;
  border-bottom: 1px solid rgb(16 16 16 / 0.06);
  white-space: nowrap;
}

.note-body li span:last-child {
  color: rgb(16 16 16 / 0.45);
}

.note .art {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.note-locked .note-body {
  filter: blur(1.5px);
  opacity: 0.5;
}

.note-locked::after {
  content: "";
  position: absolute;
  top: 58%;
  left: 50%;
  width: 44px;
  height: 44px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #34c759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h.5A1.5 1.5 0 0 1 19 11.500v7a1.500 1.500 0 0 1-1.500 1.500h-11A1.500 1.500 0 0 1 5 18.500v-7A1.500 1.500 0 0 1 6.500 10H7Zm2 0h6V8a3 3 0 0 0-6 0v2Z'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow: 0 4px 14px rgb(52 199 89 / 0.4);
}

/* ---------- 9. Tabs ---------- */

.tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.tablist {
  position: relative;
  display: flex;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  border-radius: 999px;
  background: var(--fill);
  scrollbar-width: none;
}

.tablist::-webkit-scrollbar {
  display: none;
}

.tablist::before {
  content: "";
  position: absolute;
  inset-block: 4px;
  left: var(--pill-x, 4px);
  width: var(--pill-w, 0);
  border-radius: 999px;
  background: var(--white);
  transition: left 0.2s ease-out, width 0.2s ease-out;
}

.tablist button {
  position: relative;
  flex: none;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: -0.4px;
  white-space: nowrap;
  color: var(--text-2);
  transition: color 0.2s;
}

@media (max-width: 639px) {
  .tablist button {
    padding-inline: 14px;
  }
}

.tablist button[aria-selected="true"] {
  color: var(--ink);
}

.tabs .tabs {
  width: 100%;
}

.tab-captions,
.tab-screens {
  display: grid;
  width: 100%;
}

.tab-captions {
  max-width: 640px;
  text-align: center;
  color: var(--text-2);
}

.tab-captions > *,
.tab-screens > * {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s linear, visibility 0.3s;
}

.tab-captions > .is-active,
.tab-screens > .is-active {
  opacity: 1;
  visibility: visible;
  transition-duration: 0.45s;
}

.tab-screens {
  max-width: 1000px;
  margin-top: 16px;
}

/* ---------- 10. Feature grid, FAQ, closing, footer ---------- */

/* Cards read across in order, and every card in a grid is the height of the tallest. */
.facts {
  display: grid;
  gap: var(--grid-gap);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: var(--content-radius);
  background: var(--card);
}

.fact-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fact-icon {
  flex: none;
  font-size: 1.125rem;
  font-weight: 600;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tone, var(--blue));
  color: var(--white);
}

.fact-icon svg {
  width: 24px;
  height: 24px;
}

.fact h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  letter-spacing: -0.4px;
}

/* The code, set like the box it is typed into. */
.fact .entry {
  align-self: flex-start;
  padding: 6px 16px;
  border-radius: 12px;
  background: var(--page);
  box-shadow: inset 0 0 0 1px rgb(16 16 16 / 0.1);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 2.25rem;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }

  /* A card left on its own in the last row sits in the middle, the same size as the rest. */
  .facts > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--grid-gap)) / 2);
  }
}

@media (min-width: 1024px) {
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .facts > :last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }

  .facts > :last-child:nth-child(3n + 1) {
    grid-column: 2;
  }
}

/* The steps, then what happens after them, close enough to read as one block. */
.install {
  display: flex;
  flex-direction: column;
  gap: var(--card-md);
}

.install > .intro .body {
  color: var(--text-2);
}

.faq {
  width: 100%;
  max-width: 840px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq details {
  border-radius: var(--content-radius);
  background: var(--card);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  letter-spacing: -0.4px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--content-radius);
}

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

.faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-right: 2px solid rgb(16 16 16 / 0.45);
  border-bottom: 2px solid rgb(16 16 16 / 0.45);
  rotate: 45deg;
  transition: rotate 0.2s, margin 0.2s;
}

.faq details[open] summary::after {
  margin-top: 5px;
  rotate: 225deg;
}

.faq details p {
  padding: 0 24px 22px;
  color: rgb(16 16 16 / 0.7);
}

/* Links inside running text, wherever they sit on the page. */
.faq details a,
.fine a,
.analytics-settings {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.faq details a:hover,
.fine a:hover,
.analytics-settings:hover {
  color: var(--blue-hover);
}

/* Small print that belongs with a section but should not compete with its lead. */
.fine {
  max-width: 600px;
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  letter-spacing: -0.2px;
  color: var(--text-2);
  text-wrap: pretty;
}

/* Support comes after the install steps, so it is a single card at a smaller scale than the
   sections before it. */
.support {
  padding-block: var(--section-gap);
}

.support-card {
  max-width: 920px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: var(--card-md);
  border-radius: var(--card-radius);
  background: var(--card);
}

.support-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.support-copy p {
  color: var(--text-2);
}

.support-action {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-coffee {
  gap: 10px;
  background: #ffdd00;
  color: var(--ink);
}

.btn-coffee:hover {
  background: #f5d000;
}

.btn-coffee svg {
  width: 22px;
  height: 22px;
}

.support-note {
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
  text-wrap: balance;
  color: var(--text-2);
}

@media (min-width: 768px) {
  .support-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding: var(--card-md) var(--card-lg);
  }

  .support-action {
    flex: none;
    width: 240px;
  }
}

.footer {
  padding: 48px 0 36px;
  background: var(--ink);
  color: var(--white);
}

.footer-inner {
  width: min(100% - 40px, 1180px);
  margin-inline: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 32px;
}

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

.footer-brand svg {
  width: 30px;
  height: 30px;
}

.footer h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.375rem;
  letter-spacing: 0.1px;
}

.footer ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

/* A link that wraps in a narrow column stays tight and breaks between words, not at catch-up. */
.footer li {
  line-height: 1.35;
  text-wrap: balance;
}

.footer li a {
  letter-spacing: 0.2px;
  color: rgb(255 255 255 / 0.7);
  transition: color 0.15s;
}

.footer li a:hover {
  color: var(--white);
}

.footer-legal {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid rgb(255 255 255 / 0.2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(255 255 255 / 0.7);
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 150px 1fr 1fr 1fr;
  }

  .footer-brand {
    grid-column: auto;
  }
}

/* ---------- 11. TV and remote ---------- */

.tv {
  position: relative;
  width: 100%;
  container-type: inline-size;
}

.tv-body {
  position: relative;
  z-index: 1;
  padding: 0.55cqw 0.55cqw 0.9cqw;
  border-radius: 1cqw;
  background: linear-gradient(#1a1a1c, #050506);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6), 0 2.500cqw 5cqw -2cqw rgb(0 0 0 / 0.45);
}

.tv-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.5cqw;
  background: #0c0d10;
  container-type: inline-size;
}

/* A faint sheen so the panel reads as glass rather than a flat rectangle. */
.tv-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgb(255 255 255 / 0.07), transparent 38%);
  pointer-events: none;
}

.tv-stand {
  position: relative;
  width: 34%;
  height: 3.2cqw;
  margin: 0 auto;
}

.tv-stand::before {
  content: "";
  position: absolute;
  inset: 0 38% 0.7cqw;
  background: linear-gradient(90deg, #8e8e93, #d9d9de 45%, #a1a1a6);
}

.tv-stand::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 0.8cqw;
  border-radius: 0.8cqw 0.8cqw 0.2cqw 0.2cqw;
  background: linear-gradient(#e8e8ed, #a1a1a6);
  box-shadow: 0 1cqw 1.5cqw -0.6cqw rgb(0 0 0 / 0.35);
}

.remote {
  z-index: 2;
  height: 3.3em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.16em;
  padding-top: 0.14em;
  border-radius: 0.5em;
  background: linear-gradient(100deg, #e4e4e9, #fdfdfd 28%, #f4f4f7 72%, #d5d5db);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 0 0 1px rgb(16 16 16 / 0.12),
    0 0.3em 0.5em -0.15em rgb(16 16 16 / 0.45);
}

.remote::before {
  content: "";
  width: 0.05em;
  height: 0.05em;
  border-radius: 50%;
  background: #8e8e93;
}

.remote-pad {
  width: 0.76em;
  height: 0.76em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(#2c2c2f, #151517);
  box-shadow: 0 0.03em 0.06em rgb(16 16 16 / 0.35);
}

.remote-pad::before {
  content: "";
  width: 0.36em;
  height: 0.36em;
  border-radius: 50%;
  background: linear-gradient(#f6f6f8, #dcdce1);
}

.remote-keys {
  display: grid;
  grid-template-columns: 0.27em 0.27em;
  gap: 0.11em 0.16em;
}

.remote-keys i {
  height: 0.27em;
  border-radius: 50%;
  background: linear-gradient(#efeff2, #dadadf);
  box-shadow: inset 0 0 0 1px rgb(16 16 16 / 0.08), 0 0.015em 0.03em rgb(16 16 16 / 0.2);
}

.remote-keys i:nth-child(2) {
  background: linear-gradient(#2c2c2f, #151517);
}

.remote-keys i:nth-child(3) {
  background: linear-gradient(var(--brand-blue), #1064b5);
}

/* ---------- 12. App screens ----------
   Drawn in the app's own tokens on its 960x540dp canvas: inside .ui, 1em is 10dp.
   Font sizes are only ever set on leaf elements, so the em never compounds; where a leaf carries
   its own padding, the dp value is divided by its font size. Titles are Manrope, the wordmark's
   face, and everything read in passing is Inter, as in the app. */

@font-face {
  font-family: Manrope;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/manrope-bold.woff2") format("woff2");
}

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

.ui {
  --bg: #0f0f11;
  --surface: #151518;
  --raised: #1b1c21;
  --hover: #24252b;
  --t1: #f2f2f4;
  --prose: #d6d6db;
  --t2: #b9bbc3;
  --t3: #83868f;
  --focus: #f2f2f4;
  --on-focus: #0f0f11;
  --on-focus-2: rgb(15 15 17 / 0.62);
  --line-bright: rgb(255 255 255 / 0.14);
  --accent: #26a5e4;
  --accent-2: rgb(38 165 228 / 0.7);
  --accent-dim: #1d3544;
  --shade: 8 8 10;
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: calc(100cqw / 96);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
  color: var(--t1);
  background: linear-gradient(135deg, #16161b, var(--bg) 55%, #0a0a0c);
  user-select: none;
}

.ui p,
.ui b,
.ui span,
.ui small,
.ui time {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui b {
  font-weight: 500;
}

.ui small {
  display: block;
}

.ui svg {
  flex: none;
  width: 2em;
  height: 2em;
  fill: currentColor;
}

.t-display,
.t-title,
.t-section,
.t-heading {
  font-family: Manrope, Inter, system-ui, sans-serif;
  font-weight: 800;
}

.t-display { font-size: 4em; line-height: 1.1; letter-spacing: -0.03em; }
.t-title { font-size: 2.4em; line-height: 1.25; letter-spacing: -0.015em; }
.t-section { font-size: 2em; line-height: 1.3; letter-spacing: -0.012em; }
.t-heading { font-size: 1.6em; font-weight: 700; line-height: 1.375; letter-spacing: -0.005em; }
.t-sub { font-size: 1.6em; font-weight: 500; line-height: 1.375; }
.t-body { font-size: 1.5em; line-height: 1.47; }
.t-control { font-size: 1.4em; font-weight: 500; line-height: 1.36; }
.t-small { font-size: 1.3em; line-height: 1.38; }
.t-micro { font-size: 1.2em; font-weight: 500; line-height: 1.33; }
.t-label { font-size: 1.1em; font-weight: 600; line-height: 1.27; }
.c2 { color: var(--t2); }
.c3 { color: var(--t3); }
.cp { color: var(--prose); }
.ca { color: var(--accent); }

.ui .row {
  display: flex;
  align-items: center;
  gap: 0.8em;
  overflow: visible;
}

/* The artwork of whatever is focused, washed across the whole screen. */
.wash,
.wash::before,
.wash::after {
  position: absolute;
  inset: 0;
}

/* The app blurs by stretching a thumbnail over the screen, so the images here are 64px wide. */
.wash::before {
  content: "";
  opacity: 0.5;
  background: var(--img, radial-gradient(60% 80% at 70% 20%, var(--wash), transparent 70%)) center / cover;
}

.wash.deep::before {
  opacity: 0.7;
}

.wash::after {
  content: "";
  background:
    linear-gradient(90deg, rgb(15 15 17 / 0.8), rgb(15 15 17 / 0.22) 50%, transparent),
    linear-gradient(rgb(15 15 17 / 0.1), rgb(15 15 17 / 0.62) 55%, rgb(15 15 17 / 0.94));
}

/* A list that runs on past the foot of the screen fades out rather than ending on a cut row. */
.fade {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 5.6em), transparent);
  mask-image: linear-gradient(#000 calc(100% - 5.6em), transparent);
}

/* The rail sits at icon width over the content: the mark, the three sections, the library and
   search, and settings at the foot. The section you are in is blue with a bar at the edge. */
.rail {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 6.4em;
  padding: 1.6em 0.8em;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  color: var(--t3);
  background: linear-gradient(90deg, var(--bg), transparent);
}

.rail img {
  width: 3.6em;
  height: 3.6em;
  margin: 0 0 1.2em 0.6em;
}

.rail i {
  position: relative;
  flex: none;
  height: 4.2em;
  display: grid;
  place-items: center;
}

.rail i:nth-of-type(4) { margin-top: 1.6em; }
.rail i:last-child { margin-top: auto; }

.rail .on {
  color: var(--accent);
}

.rail .on::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.4em;
  width: 0.3em;
  height: 1.6em;
  translate: 0 -50%;
  border-radius: 0.2em;
  background: var(--accent);
}

.pane {
  position: absolute;
  inset: 2.2em 4em 0 10.4em;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

/* The screen is cut off at the bottom like a scrolled list, so nothing may shrink to fit. */
.pane > * {
  flex: none;
}

.pane > .fade {
  flex: 1;
  min-height: 0;
}

/* Controls: light where the remote is, blue for what is chosen, a quiet deck otherwise. */
.bar {
  display: flex;
  align-items: center;
  gap: 0.8em;
  height: 3.6em;
}

.bar .gap {
  flex: 1;
}

.field,
.chip,
.seg {
  flex: none;
  display: flex;
  align-items: center;
  height: 3.6em;
  border-radius: 1em;
  background: var(--raised);
}

.field {
  flex-shrink: 1;
  min-width: 0;
  justify-content: space-between;
  gap: 0.8em;
  width: 22em;
  padding: 0 1.2em 0 1.4em;
  color: var(--t3);
}

.field span {
  font-size: 1.4em;
}

.ui .field svg {
  width: 1.6em;
  height: 1.6em;
}

.field.long {
  width: 26.4em;
}

.field.wide {
  width: auto;
  height: 3.8em;
}

.field.wide span {
  color: var(--t1);
}

.field.focus {
  background: var(--focus);
  color: var(--on-focus-2);
}

.field.focus span {
  color: var(--on-focus);
}

.chip {
  gap: 0.8em;
  padding-inline: 1.3em;
  color: var(--t2);
}

.chip span,
.chip small {
  font-size: 1.4em;
  font-weight: 500;
}

.chip small {
  color: var(--t3);
}

.ui .chip svg {
  width: 1.7em;
  height: 1.7em;
  margin-left: -0.1em;
}

.chip.on {
  background: var(--accent-dim);
  color: var(--accent);
}

.chip.on small {
  color: var(--accent-2);
}

.seg {
  gap: 0.2em;
  padding: 0.3em;
}

.seg b {
  height: calc(3em / 1.4);
  display: flex;
  align-items: center;
  gap: calc(0.6em / 1.4);
  padding-inline: calc(1.4em / 1.4);
  border-radius: calc(0.8em / 1.4);
  font-size: 1.4em;
  color: var(--t2);
}

.seg small {
  color: var(--t3);
}

.seg .on {
  background: var(--accent-dim);
  color: var(--accent);
}

.seg .on small {
  color: var(--accent-2);
}

.logo {
  flex: none;
  display: grid;
  padding: 0.4em;
  border-radius: 0.6em;
  background: var(--raised);
}

.ui .logo svg {
  width: 100%;
  height: 100%;
}

.meter {
  display: block;
  height: 0.3em;
  border-radius: 0.15em;
  background: linear-gradient(90deg, var(--accent) var(--p), var(--line-bright) var(--p));
}

/* The provider's own groupings, down the left of Live TV, Movies and TV Shows. */
.split {
  display: flex;
  gap: 1.6em;
}

.pane > .split {
  flex: 1;
  min-height: 0;
}

.cats {
  flex: none;
  width: 16.8em;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}

.cats p {
  position: relative;
  flex: none;
  height: 3em;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0 0.8em 0 1.6em;
  color: var(--t2);
}

.cats i {
  font-size: 1.1em;
  font-weight: 600;
  font-style: normal;
  color: var(--t3);
}

.cats b {
  font-size: 1.4em;
}

.cats small {
  margin-left: auto;
  font-size: 1.2em;
  font-weight: 500;
  color: var(--t3);
}

.cats .all {
  color: var(--t1);
}

.cats .on,
.cats .on i,
.cats .on small {
  color: var(--accent);
}

.cats .on::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.6em;
  width: 0.2em;
  height: 1.4em;
  translate: 0 -50%;
  border-radius: 0.1em;
  background: var(--accent);
}

/* Channel rows: the channel with one quiet line of what it is, then what is on with a short bar
   and the time it has left. What follows is said on the focused row only. */
.chs {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

/* The focused row and poster grow past the list's edge, so the clipped lists get room for it. */
.chs.fade,
.posters {
  margin: -1em;
  padding: 1em;
}

.ch {
  flex: none;
  display: flex;
  align-items: center;
  height: 4.2em;
  padding-right: 1.2em;
  border-radius: 0.8em;
}

.ch-no {
  flex: none;
  width: calc(3.8em / 1.3);
  text-align: right;
  font-size: 1.3em;
  color: var(--t3);
}

.ch > .logo {
  width: 5.2em;
  height: 3.4em;
  margin-inline: 1.2em;
}

.ch-name {
  flex: none;
  width: 18em;
}

.ch-name b {
  display: block;
  font-size: 1.5em;
  line-height: 1.33;
}

.ch-tags {
  display: flex;
  align-items: center;
  gap: 0.8em;
  color: var(--t3);
}

.ch-tags span {
  font-size: 1.2em;
  font-weight: 500;
}

.ui .ch-tags svg {
  width: 1.3em;
  height: 1.3em;
}

.ch-on {
  flex: 1;
  min-width: 0;
  padding-left: 1.2em;
}

.ch-on b {
  display: block;
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1.36;
  color: var(--t2);
}

.ch-on p {
  display: flex;
  align-items: center;
  margin-top: 0.4em;
  color: var(--t3);
}

.ch-on span {
  font-size: 1.2em;
  font-weight: 500;
}

.ch-on .meter {
  flex: none;
  width: 5.6em;
  margin-right: 0.8em;
}

/* The quick channel list over the picture: solid where the rows are and faded at its edge. */
.zap {
  position: absolute;
  inset: 0 auto 0 0;
  width: 37.2em;
  padding: 2.2em 5.6em 2.2em 2.8em;
  display: flex;
  flex-direction: column;
  background: linear-gradient(90deg, var(--bg) 72%, transparent);
}

.zap > p {
  margin: 0 0 calc(1.2em / 1.3) calc(0.8em / 1.3);
}

.zap .chs {
  gap: 0.4em;
}

.zap .ch {
  gap: 0.8em;
  padding-inline: 0.8em;
}

.zap .ch-no {
  width: calc(3.8em / 1.2);
  font-size: 1.2em;
}

.zap .logo {
  width: 3.8em;
  height: 2.6em;
  padding: 0.3em;
}

.zap .ch-name {
  flex: 1;
  width: auto;
  min-width: 0;
}

.zap .ch-name b {
  font-size: 1.3em;
  line-height: 1.38;
}

.zap .ch-name span {
  display: block;
  font-size: 1.2em;
  line-height: 1.33;
  color: var(--t3);
}

.zap .meter {
  width: 50%;
  margin-top: 0.3em;
}

.ch.on {
  background: var(--accent-dim);
}

.ch.on .ch-no,
.ch.on b {
  color: var(--accent);
}

.ch.focus {
  background: var(--focus);
  scale: 1.02;
}

.ch.focus b {
  color: var(--on-focus);
}

.ch.focus .ch-no,
.ch.focus .ch-tags,
.ch.focus .ch-on p,
.ch.focus .ch-name span {
  color: var(--on-focus-2);
}

.ch.focus .meter {
  height: 0.4em;
  background: linear-gradient(90deg, var(--accent) var(--p), var(--on-focus) var(--p));
}

.zap .ch.focus .meter {
  height: 0.3em;
}

/* Guide */
.guide-head {
  display: flex;
  align-items: flex-start;
  gap: 2.4em;
  margin-bottom: 0.4em;
}

.guide-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.ui .guide-info .row {
  gap: 1.4em;
}

.guide-info .syn {
  max-width: calc(52em / 1.3);
  height: calc(3.8em / 1.3);
  font-size: 1.3em;
  line-height: calc(1.9 / 1.3);
  white-space: normal;
  color: var(--t2);
}

.day {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.2em;
  height: 3.4em;
  padding: 0.3em;
  border-radius: 1em;
  background: var(--raised);
}

.day i {
  width: 2.8em;
  height: 2.8em;
  display: grid;
  place-items: center;
  color: var(--t2);
}

.ui .day svg {
  width: 1.8em;
  height: 1.8em;
}

.day b {
  height: calc(2.8em / 1.3);
  display: flex;
  align-items: center;
  padding-inline: calc(1em / 1.3);
  font-size: 1.3em;
}

.ruler {
  position: relative;
  height: 2.4em;
  margin: 0 0 -0.8em 18.4em;
}

.ruler span {
  position: absolute;
  top: 50%;
  left: var(--x);
  translate: 0 -50%;
  font-size: 1.2em;
  font-weight: 500;
  color: var(--t3);
}

.ruler .now {
  translate: -50% -50%;
  padding: calc(0.2em / 1.1) calc(0.6em / 1.1);
  border-radius: calc(0.5em / 1.1);
  font-size: 1.1em;
  font-weight: 600;
  color: var(--on-focus);
  background: var(--accent);
}

.grid {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* The now line runs down the whole grid over the fills and behind the titles. */
.grid::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 calc(18.4em + (100% - 18.4em) * var(--now));
  width: 0.2em;
  background: var(--accent);
}

.grow {
  flex: none;
  display: flex;
  height: 4.6em;
}

.gutter {
  flex: none;
  width: 16.8em;
  margin: 0.2em 1.6em 0.2em 0;
  display: flex;
  align-items: center;
  gap: 1em;
  padding-inline: 0.8em;
  border-radius: 0.8em;
  color: var(--t3);
}

.gutter .logo {
  width: 4.4em;
  height: 3em;
  padding: 0.3em;
}

.gutter b {
  font-size: 1.3em;
  line-height: calc(1.6 / 1.3);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--t2);
}

.ui .gutter > svg {
  width: 1.3em;
  height: 1.3em;
  margin-left: -0.2em;
}

.gutter.on {
  background: rgb(242 242 244 / 0.06);
}

.gutter.on b {
  font-weight: 600;
  color: var(--t1);
}

.cells {
  flex: 1;
  min-width: 0;
  display: flex;
}

.cell {
  min-width: 0;
  flex: var(--m) 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1em;
  margin: 0.2em 0.3em 0.2em 0;
  padding-inline: 1em;
  border-radius: 0.6em;
  background: #1a1b20;
  color: var(--t2);
}

.cell b,
.cell time {
  position: relative;
  z-index: 2;
}

.cell b {
  font-size: 1.3em;
  font-weight: 400;
}

.cell time {
  font-size: 1.1em;
  color: var(--t3);
}

.cell.past {
  background: rgb(242 242 244 / 0.035);
  color: var(--t3);
}

.cell.past time {
  color: #6c6f78;
}

.cell.live {
  background: var(--hover);
  color: var(--t1);
}

.cell.live b {
  font-weight: 500;
}

.cell.focus {
  margin-block: 0;
  background: var(--focus);
  color: var(--on-focus);
}

.cell.focus b {
  font-weight: 600;
}

.cell.focus time {
  color: var(--on-focus-2);
}

/* Posters and art */
.browse {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}

.spot {
  height: 4.4em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.spot .t-micro {
  font-weight: 400;
  color: var(--t2);
}

.posters {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1.6em 1.2em;
}

.poster-card {
  min-width: 0;
  min-height: 18.2em;
}

.poster-card p {
  margin-top: calc(0.8em / 1.3);
  font-size: 1.3em;
  line-height: calc(1.8 / 1.3);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--t2);
}

.poster-card small {
  margin-top: calc(0.2em / 1.2);
  font-size: 1.2em;
  font-weight: 500;
  line-height: calc(1.6 / 1.2);
  color: var(--t3);
}

.art {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: 0.6em;
  background: var(--surface);
}

.art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Focus lifts a poster or a still and rings it in light, with a sliver of the window between. */
.focus > .art {
  box-shadow: 0 0 0 0.2em var(--bg), 0 0 0 0.5em var(--focus), 0 1.6em 3.2em rgb(0 0 0 / 0.55);
}

.poster-card.focus {
  scale: 1.08;
}

.poster-card.focus p {
  color: var(--t1);
}

.art .q {
  position: absolute;
  top: calc(0.4em / 1.1);
  left: calc(0.4em / 1.1);
  padding: calc(0.1em / 1.1) calc(0.4em / 1.1);
  border: calc(0.1em / 1.1) solid rgb(245 245 247 / 0.7);
  border-radius: calc(0.4em / 1.1);
  font-size: 1.1em;
  font-weight: 600;
  font-style: normal;
  line-height: 1.27;
  color: var(--t1);
  background: rgb(15 15 17 / 0.54);
}

.art .watched {
  position: absolute;
  inset: auto 0 0;
  height: 0.4em;
  background: linear-gradient(90deg, var(--accent) var(--p), rgb(15 15 17 / 0.7) var(--p));
}

/* A title page: its backdrop sharp in the top right, feathered into the wash of the same
   picture, and the words down the left. */
.hero-art {
  position: absolute;
  top: 0;
  right: 0;
  width: 56%;
  aspect-ratio: 16 / 9;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.12) 16%, rgb(0 0 0 / 0.55) 34%, #000 56%);
  mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.12) 16%, rgb(0 0 0 / 0.55) 34%, #000 56%);
}

.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(rgb(0 0 0 / 0.55), #000 18%, #000 50%, rgb(0 0 0 / 0.35) 78%, transparent);
  mask-image: linear-gradient(rgb(0 0 0 / 0.55), #000 18%, #000 50%, rgb(0 0 0 / 0.35) 78%, transparent);
}

.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(15 15 17 / 0.85), rgb(15 15 17 / 0.45) 45%, transparent 75%);
}

.detail {
  position: absolute;
  inset: 0;
  padding: 4.8em 5.6em 0;
  display: flex;
  flex-direction: column;
}

.detail-main {
  width: 42em;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}

.ui .detail-main .row {
  gap: 1.6em;
}

.detail-main .t-control {
  font-weight: 400;
}

.tag {
  flex: none;
  display: flex;
  align-items: center;
  height: calc(2.8em / 1.3);
  padding-inline: calc(1.2em / 1.3);
  border-radius: calc(0.8em / 1.3);
  font-size: 1.3em;
  color: var(--t2);
  background: var(--raised);
}

.ui .tags {
  gap: 0.8em;
}

.plot {
  font-size: 1.5em;
  line-height: calc(2.3 / 1.5);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: var(--t2);
}

.ui .btns {
  gap: 1.2em;
  margin-top: 0.6em;
}

/* A button at rest is a translucent step of light; focused, it fills with light. */
.tv-btn {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1em;
  height: 3.6em;
  padding: 0 1.6em 0 1.4em;
  border-radius: 1em;
  color: var(--t2);
  background: rgb(242 242 244 / 0.12);
}

.tv-btn span {
  font-size: 1.3em;
  font-weight: 500;
}

.ui .tv-btn svg {
  width: 1.6em;
  height: 1.6em;
}

.tv-btn.large {
  height: 4.4em;
  padding-right: 2em;
  border-radius: 1.1em;
}

.tv-btn.large span {
  font-size: 1.5em;
}

.ui .tv-btn.large svg {
  width: 1.8em;
  height: 1.8em;
}

.tv-btn.focus {
  scale: 1.05;
  color: var(--on-focus);
  background: var(--focus);
}

.tv-btn.focus span {
  font-weight: 600;
}

.seasons {
  display: flex;
  gap: 0.8em;
  margin-top: 2em;
}

.seasons span {
  height: calc(3.4em / 1.4);
  display: flex;
  align-items: center;
  gap: calc(0.8em / 1.4);
  padding-inline: calc(1.3em / 1.4);
  border-radius: calc(0.9em / 1.4);
  font-size: 1.4em;
  font-weight: 500;
  color: var(--t2);
}

.seasons small {
  color: var(--t3);
}

.seasons .on {
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-dim);
}

.seasons .on small {
  font-weight: 500;
  color: var(--accent-2);
}

.eps {
  display: flex;
  gap: 1.6em;
  margin: 1.2em -5.6em 0 0;
  padding-top: 1em;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 7.2em), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 7.2em), transparent);
}

.ep {
  flex: none;
  width: 17.6em;
}

.still {
  flex: none;
  width: 20.8em;
}

.ep .art,
.still .art {
  aspect-ratio: 16 / 9;
  border-radius: 0.8em;
}

.ep p,
.still p {
  margin-top: calc(0.8em / 1.4);
  font-size: 1.4em;
  font-weight: 500;
  color: var(--t2);
}

.ep p i {
  font-style: normal;
  color: var(--t3);
}

.ep small,
.still small {
  font-size: 1.2em;
  color: var(--t3);
}

.still.focus {
  scale: 1.05;
}

.still.focus p {
  margin-top: calc(1.2em / 1.4);
  font-weight: 600;
  color: var(--t1);
}

.still.focus small {
  color: var(--t2);
}

/* Library and Search: a screen's name, then shelves that scroll sideways. */
.lib {
  position: absolute;
  inset: 0 0 0 6.4em;
  padding: 2.2em 4em;
  display: flex;
  flex-direction: column;
  gap: 2.4em;
}

.lib.search {
  gap: 1.6em;
}

.lib > * {
  flex: none;
}

.lib .t-title + p {
  margin-top: calc(0.4em / 1.3);
}

.ui .rowlabel {
  align-items: baseline;
  gap: 1.2em;
}

.shelf {
  display: flex;
  gap: 1.6em;
  margin-top: -1.6em;
  padding: 1em 0.8em;
}

.lib.search .shelf {
  margin-top: -0.4em;
  padding-bottom: 0.6em;
}

.shelf.channels {
  padding-block: 0.6em;
}

.shelf .poster-card {
  flex: none;
  width: 9.6em;
}

.tile-ch {
  flex: none;
  width: 25.6em;
  height: 6.4em;
  display: flex;
  align-items: center;
  gap: 1.2em;
  padding-inline: 1.2em;
  border-radius: 1em;
  background: rgb(242 242 244 / 0.05);
}

.tile-ch .logo {
  width: 6.2em;
  height: 4.2em;
}

.tile-ch div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.tile-ch b {
  font-size: 1.4em;
  line-height: 1.36;
}

.tile-ch div > span {
  font-size: 1.2em;
  line-height: 1.33;
  color: var(--t3);
}

.tile-ch .meter {
  width: 6.4em;
}

/* Player */
.vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The shade rises far enough up the picture that a channel's own lower third never shows
   through the words laid over it. */
.scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 34%, rgb(var(--shade) / 0.72) 56%, rgb(var(--shade) / 0.95) 74%,
    rgb(var(--shade) / 0.98) 88%, rgb(var(--shade) / 0.99));
}

.corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 26%;
  background: radial-gradient(100% 100% at 0 0, rgb(var(--shade) / 0.6), rgb(var(--shade) / 0.3) 50%, transparent);
}

.corner.end {
  left: auto;
  right: 0;
  width: 34%;
  background: radial-gradient(100% 100% at 100% 0, rgb(var(--shade) / 0.6), rgb(var(--shade) / 0.3) 50%, transparent);
}

.context {
  position: absolute;
  top: 3em;
  left: 5.6em;
  display: flex;
  align-items: center;
  gap: 0.8em;
  color: var(--t2);
}

.ui .context svg {
  width: 1.5em;
  height: 1.5em;
}

.clock {
  position: absolute;
  top: 3em;
  right: 5.6em;
  display: flex;
  align-items: center;
  gap: 1.4em;
}

.live-mark {
  display: flex;
  align-items: center;
  gap: 0.7em;
  height: 2.4em;
  padding-inline: 0.9em;
  border-radius: 0.7em;
  background: rgb(15 15 17 / 0.62);
}

.live-mark::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--accent);
}

.live-mark span {
  font-size: 1.2em;
  font-weight: 600;
}

.clock time {
  font-size: 2em;
  font-weight: 500;
  line-height: 1.3;
}

.banner {
  position: absolute;
  inset: auto 5.6em 3.8em;
  display: flex;
  align-items: flex-end;
  gap: 2.2em;
}

.banner > .logo {
  width: 8.76em;
  height: 6em;
  margin-bottom: 0.2em;
  padding: 0.8em;
  border-radius: 1em;
}

.banner-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

.ui .banner .row {
  gap: 1.2em;
}

.ui .banner .row:first-child {
  align-items: baseline;
}

.banner .t-title {
  line-height: calc(2.8 / 2.4);
}

.banner-now {
  font-size: 1.8em;
  font-weight: 500;
  line-height: 1.33;
}

.ui .banner .span {
  max-width: 52em;
}

.span .meter {
  flex: 1;
}

.span .t-small {
  padding-left: calc(0.4em / 1.3);
}

.keys {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-bottom: 0.2em;
}

.key {
  display: flex;
  align-items: center;
  gap: 0.9em;
  color: var(--t2);
}

.key i {
  width: 2.2em;
  height: 2.2em;
  display: grid;
  place-items: center;
  border: 0.15em solid rgb(242 242 244 / 0.4);
  border-radius: 0.6em;
}

.ui .key svg {
  width: 1.5em;
  height: 1.5em;
}

.key span {
  font-size: 1.2em;
}

.vod {
  position: absolute;
  inset: auto 5.6em 2.2em;
  display: flex;
  flex-direction: column;
}

.vod .t-small {
  margin-top: calc(0.4em / 1.3);
}

/* Blue for what has played, a lighter band for what is loaded ahead, and a knob of light while
   the remote is on the bar. */
.seek {
  position: relative;
  height: 2em;
  margin-top: 3em;
}

.seek::before {
  content: "";
  position: absolute;
  inset: 0.8em 0 auto;
  height: 0.4em;
  border-radius: 0.2em;
  background: linear-gradient(90deg, var(--accent) var(--p), rgb(242 242 244 / 0.3) var(--p) var(--b),
    rgb(242 242 244 / 0.2) var(--b));
}

.seek::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--p);
  width: 1.8em;
  height: 1.8em;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--focus);
  box-shadow: 0 0.2em 0 0.3em rgb(0 0 0 / 0.4);
}

.times {
  display: flex;
  gap: 1.4em;
  margin-top: 0.6em;
  color: var(--t2);
}

.times span {
  font-size: 1.3em;
}

.times span:first-child {
  flex: 1;
}

.times span:last-child {
  color: var(--t3);
}

.transport {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.8em;
}

.transport .gap {
  flex: 1;
}

.glyph {
  position: relative;
  flex: none;
  width: 4em;
  height: 4em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--t2);
}

.ui .glyph svg {
  width: 2.2em;
  height: 2.2em;
}

.glyph em {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -34%;
  font-size: 0.7em;
  font-style: normal;
  font-weight: 700;
}

.sheet {
  position: absolute;
  inset: 0 0 0 auto;
  width: 42em;
  padding: 2.2em 2.8em 2.2em 1.6em;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  background: rgb(15 15 17 / 0.97);
}

.sheet > * {
  flex: none;
}

.sheet > .t-section {
  margin-bottom: calc(1.6em / 2);
}

.sheet-label {
  margin: calc(2em / 1.3) 0 calc(0.8em / 1.3);
}

.opt {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.2em;
  padding: 1.2em;
  border-radius: 0.6em;
  color: var(--t2);
}

.opt > i {
  flex: none;
  width: 2em;
  height: 2em;
  display: grid;
  place-items: center;
  color: var(--accent);
}

.ui .opt svg {
  width: 1.8em;
  height: 1.8em;
}

.opt > div {
  min-width: 0;
}

.opt b {
  display: block;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.47;
}

.opt small {
  font-size: 1.2em;
  font-weight: 500;
  color: var(--t3);
}

.opt.on {
  color: var(--accent);
}

.opt.focus {
  scale: 1.02;
  color: var(--on-focus);
  background: var(--focus);
}

.opt.focus > i {
  color: var(--on-focus);
}

.opt.focus small {
  color: var(--on-focus-2);
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .rise {
    opacity: 1;
    translate: none;
  }
}

/* The shared, outlined wordmark keeps the approved lettering on every device. */
.brand-lockup, .footer-brand img { display: block; width: 145px; height: auto; }
.brand-lockup--inverse, .header.is-dark .brand-lockup { display: none; }
.header.is-dark .brand-lockup--inverse { display: block; }

.analytics-settings {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.analytics-consent {
  position: fixed;
  z-index: 100;
  inset: auto 16px 16px;
  max-width: 660px;
  margin-inline: auto;
  padding: 20px;
  border: 1px solid #d2d2d7;
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 8px 32px #0002;
}

.analytics-consent p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; }
.analytics-consent a { color: var(--blue); text-decoration: underline; }
.analytics-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.analytics-actions button {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--blue);
  border-radius: 8px;
  background: var(--white);
  color: var(--blue);
  font: inherit;
  cursor: pointer;
}
.analytics-actions button:hover { background: var(--parchment); color: var(--blue-hover); }