/* OTV Prime 11000 site.
   The page structure follows the big product-page pattern (sticky local bar, wide centred
   headlines, a television that stays put while the words change, white tiles on a soft canvas,
   a ruled tech-specs page). The look is OTV's own: wide Archivo headlines that echo the logo's
   lettering, Geist for reading (the font in the OTV films), ink on a warm canvas, and OTV orange
   for every accent. All pictures, drawings and words are OTV's. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #0a0a0a;
  --grey: #6f6c68;
  --grey-2: #6f6c68;
  --grey-3: #8c8781;
  --alt: #f6f4f1;
  --hair: #e2dfda;
  --orange: #e85f05;
  --orange-600: #c94f00;
  --orange-soft: #fdeee3;
  --link: #c94f00;
  --nav-h: 52px;
  --col: 980px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Archivo", "Geist", ui-sans-serif, system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* sections far below the window are not drawn until they are close */
.tiles,
.glance-sec,
.inbox,
.guides,
.qa-sec,
.next {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
/* moving between pages fades one into the next instead of flashing (browsers that support it) */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
:focus-visible {
  outline: 3px solid rgba(232, 95, 5, 0.55);
  outline-offset: 2px;
}
.visuallyhidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.content {
  width: var(--col);
  max-width: 87.5%;
  margin-inline: auto;
}
.more::after {
  content: " ›";
  white-space: nowrap;
}

/* ───────── type ───────── */
.eyebrow {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.headline,
.headline-2 {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.headline {
  margin-top: 14px;
  font-size: 72px;
  line-height: 76px;
}
.headline-2 {
  font-size: 52px;
  line-height: 56px;
}
/* the orange part of a headline */
.headline em,
.headline-2 em {
  font-style: normal;
  color: var(--orange);
}
.intro {
  font-size: 21px;
  line-height: 29px;
  font-weight: 450;
  letter-spacing: -0.014em;
  color: var(--grey);
  text-wrap: pretty;
}
.intro strong,
.copy strong {
  font-weight: 650;
  color: var(--ink);
}
.copy {
  font-size: 21px;
  line-height: 28px;
  font-weight: 450;
  letter-spacing: -0.014em;
  color: var(--grey);
}
.caption {
  font-size: 14px;
  line-height: 20px;
  font-weight: 450;
  letter-spacing: -0.006em;
  color: var(--grey-3);
}
.center {
  text-align: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 16px 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 1px 2px rgba(30, 25, 15, 0.06), 0 14px 30px -16px rgba(30, 25, 15, 0.32);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}
.pill {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background-color 0.15s;
}
.pill:hover {
  background: var(--orange-600);
  text-decoration: none;
}
.pill.light {
  background: #fff;
  color: var(--ink);
}
.pill.light:hover {
  background: var(--orange-soft);
}

/* ───────── local nav ───────── */
.localnav {
  position: sticky;
  top: 10px;
  z-index: 50;
  width: min(1040px, calc(100% - 20px));
  height: var(--nav-h);
  margin: 10px auto 0;
  border: 1px solid rgba(10, 10, 10, 0.07);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  view-transition-name: topbar; /* stays put while one page fades into the next */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 14px 34px -18px rgba(30, 20, 10, 0.3);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
}
.localnav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 8px 0 18px;
}
.localnav-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-stretch: 112%;
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
}
.localnav-title img {
  width: 48px;
}
.localnav-title:hover {
  text-decoration: none;
}
/* The page buttons. The current page is an orange button standing on its own; the others sit
   joined together in grey groups on either side of it. When the current page changes, the gaps,
   corners and colours slide to their new places (script.js lets that play before the page turns). */
.localnav-menu {
  --seg: 11px;
  display: flex;
  align-items: center;
  height: 100%;
}
/* phones: the links fold into a drop-down under a button that names the current page */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px 0 13px;
  border: 0;
  border-radius: 11px;
  background: var(--orange);
  box-shadow: 0 10px 20px -10px rgba(232, 95, 5, 0.85);
  color: #fff;
  font: 500 13px/1 var(--font);
  letter-spacing: -0.006em;
  cursor: pointer;
}
.nav-toggle .chev {
  width: 11px;
  height: 8px;
  margin-left: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}
.localnav.open .nav-toggle .chev {
  transform: rotate(180deg);
}
.localnav-menu a {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  background: rgba(10, 10, 10, 0.06);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--grey);
  white-space: nowrap;
  transition:
    margin 0.5s cubic-bezier(0.3, 1.25, 0.45, 1),
    border-radius 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}
.localnav-menu svg,
.nav-toggle .ico {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.localnav-menu a:hover {
  background: rgba(10, 10, 10, 0.1);
  color: var(--ink);
  text-decoration: none;
}
/* the ends of each grey group are rounded */
.localnav-menu a:first-child,
.localnav-menu a[aria-current] + a {
  border-top-left-radius: var(--seg);
  border-bottom-left-radius: var(--seg);
}
.localnav-menu a:last-child,
.localnav-menu a:has(+ a[aria-current]) {
  border-top-right-radius: var(--seg);
  border-bottom-right-radius: var(--seg);
}
.localnav-menu a[aria-current],
.localnav-menu a[aria-current]:hover {
  margin-inline: 8px;
  border-radius: var(--seg);
  background: var(--orange);
  box-shadow: 0 10px 20px -10px rgba(232, 95, 5, 0.85);
  color: #fff;
}
.localnav-menu a[aria-current]:first-child {
  margin-left: 0;
}
.localnav-menu a[aria-current]:last-child {
  margin-right: 0;
}

/* ───────── the television ───────── */
.tv {
  position: relative;
  width: var(--tvw, 100%);
}
.tv-frame {
  position: relative;
  z-index: 1;
  padding: 1.05%;
  border-radius: 0.9% / 1.6%;
  background: linear-gradient(180deg, #2b2b2d, #0b0b0c 12%, #050505);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.tv-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.tv-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the live OTV animation on the first page's screen (a small page of its own, in a frame) */
.tv-screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.tv-screen iframe.on {
  opacity: 1;
}
/* the screen's colours spilling onto the shelf underneath */
.tv-glow {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 66%;
  height: 40%;
  background: var(--glow) center / 100% 100%;
  filter: blur(44px) saturate(1.4);
  opacity: 0.42;
  transform: scaleY(-1);
  pointer-events: none;
}

/* the box and remote: one small 3D scene built by script.js, seen from the front and a little
   above like a product photo, with their reflection in the surface underneath */
.hw {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(292px * var(--hw, 0.62));
  margin-top: 26px;
  overflow-x: clip; /* the reflection's fade is wider than a phone screen */
}
.scene3d {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
  transform: scale(var(--hw, 0.62));
}
.scene3d-cam {
  position: absolute;
  left: 0;
  top: 132px;
  width: 0;
  height: 0;
  perspective: 1250px;
  perspective-origin: 0 -150px;
}
.b3 {
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateX(-14deg);
}
.b3 * {
  position: absolute;
}
/* ───────── hero ───────── */
.hero {
  margin: -62px 10px 0;
  padding-top: 62px;
  overflow: clip;
  border-radius: 0 0 44px 44px;
  background:
    radial-gradient(60% 46% at 50% 0%, rgba(232, 95, 5, 0.1), transparent 70%),
    var(--alt);
}
.hero-top {
  padding-top: 46px;
  text-align: center;
}
.hero-top .headline {
  max-width: 900px;
  margin: 0 auto;
  font-size: 64px;
  line-height: 68px;
}
.hero-stage {
  /* sized so the announcement, the television, the box and the remote all fit in the first screenful */
  --tvw: min(900px, 87.5vw, max(340px, calc((100vh - 500px) * 1.7778)));
  --hw: 0.62;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 34px;
}
.hero-lockup {
  padding-top: 26px;
  text-align: center;
}
.hero-lockup .headline-2 {
  max-width: 820px;
  margin: 20px auto 0;
}
.hero-intro {
  padding: 22px 0 150px;
  text-align: center;
}
.hero-intro .intro {
  max-width: 740px;
  margin-inline: auto;
}
.hero-intro .caption {
  margin-top: 20px;
}

/* ───────── the opening animation on the first page ─────────
   boot.js marks the page as scripted before it is drawn, so everything below starts hidden;
   script.js then adds "play" and the pieces arrive in order:
   headline word by word → the television rises in, already on the home screen and playing the
   film → the box and remote rise in → the box's light comes on → the glow spreads underneath. */
.opening .w {
  display: inline-block;
}
.js .opening .hero-top .headline {
  visibility: hidden;
}
.js .opening.play .hero-top .headline {
  visibility: visible;
}
.js .opening .w {
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(10px);
}
.js .opening.play .w {
  animation: word-in 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i) * 85ms);
}
.js .opening em .w {
  background: linear-gradient(100deg, var(--orange) 36%, #ffc79a 50%, var(--orange) 64%) 100% 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.js .opening.play em .w {
  animation: word-in 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both, shine 1.5s ease both;
  animation-delay: calc(var(--i) * 85ms), 1.25s;
}
.js .opening .tv {
  opacity: 0;
  transform: translateY(36px) scale(0.965);
}
.js .opening.play .tv {
  animation: rise-in 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both;
}
.js .opening .hw {
  opacity: 0;
  transform: translateY(28px);
}
.js .opening.play .hw {
  animation: rise-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.75s both;
}
.js .opening .led {
  opacity: 0.12;
}
.js .opening.play .led {
  animation: led-on 0.9s ease 1.5s both;
}
.js .opening .tv-glow {
  opacity: 0;
}
.js .opening.play .tv-glow {
  animation: glow-in 1.6s ease 1.5s both;
}
.js .opening .hero-lockup,
.js .opening .hero-intro {
  opacity: 0;
}
.js .opening.play .hero-lockup,
.js .opening.play .hero-intro {
  animation: fade-in 0.9s ease 2s both;
}
@keyframes word-in {
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}
@keyframes shine {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes rise-in {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade-in {
  to {
    opacity: 1;
  }
}
@keyframes led-on {
  0% {
    opacity: 0.12;
  }
  45% {
    opacity: 1;
    box-shadow: 0 0 34px 16px rgba(255, 122, 40, 0.95);
  }
  100% {
    opacity: 1;
  }
}
@keyframes glow-in {
  to {
    opacity: 0.42;
  }
}

/* ───────── first page: cards that lead to the other pages ───────── */
.explore {
  padding: 130px 0 140px;
  background: #fff;
  text-align: center;
}
.explore .headline-2 {
  margin-top: 14px;
}
.explore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 60px;
  text-align: left;
}
.xcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px;
  border-radius: 34px;
  background: var(--alt);
  color: var(--ink);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}
.xcard:hover {
  text-decoration: none;
  transform: translateY(-5px);
  box-shadow: 0 30px 50px -28px rgba(30, 20, 10, 0.35);
}
.xcard-art {
  position: relative;
  height: 270px;
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
}
.art-screen img {
  position: absolute;
  left: 44px;
  top: 40px;
  width: 112%;
  max-width: none;
  border: 7px solid #0b0b0c;
  border-radius: 8px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.45);
}
.art-dark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background:
    radial-gradient(60% 80% at 20% 20%, rgba(232, 95, 5, 0.85), transparent 70%),
    radial-gradient(50% 70% at 88% 90%, rgba(255, 138, 42, 0.4), transparent 70%), #050505;
  color: #fff;
}
.art-dark b {
  font-family: var(--display);
  font-stretch: 112%;
  font-size: 62px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.art-dark small {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #ffc79a;
}
.art-remote {
  background: var(--orange-soft);
}
.art-remote img {
  position: absolute;
  left: 50%;
  top: 34px;
  width: 200px;
  max-width: none;
  transform: translateX(-50%) rotate(-24deg);
  transform-origin: 50% 12%;
  filter: drop-shadow(0 24px 30px rgba(120, 50, 0, 0.3));
}
.art-specs {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.art-specs ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 290px;
}
.art-specs li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--alt);
}
.art-specs li.hot {
  background: var(--orange);
  color: #fff;
}
.art-specs b {
  font-family: var(--display);
  font-stretch: 112%;
  font-size: 28px;
  line-height: 30px;
  font-weight: 800;
  letter-spacing: -0.028em;
}
.art-specs span {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.72;
}
.xcard-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 22px;
}
.xcard-copy .kicker {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange);
}
.xcard-copy strong {
  font-family: var(--display);
  font-stretch: 112%;
  font-size: 25px;
  line-height: 29px;
  font-weight: 750;
  letter-spacing: -0.022em;
}
.xcard-copy .go {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--link);
}
.xcard-copy .go::after {
  content: " \2192";
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.3s ease;
}
.xcard:hover .go::after {
  transform: translateX(5px);
}

/* ───────── the "next page" link at the foot of each page ───────── */
.next {
  margin: 10px 10px 0;
  border-radius: 44px;
  background: var(--alt);
  text-align: center;
  transition: background-color 0.3s ease;
}
.next:hover {
  background: #efece7;
}
.next a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 92px 0 98px;
  color: var(--ink);
}
.next a:hover {
  text-decoration: none;
}
.next em {
  display: inline-block;
  transition: transform 0.3s ease;
}
.next a:hover em {
  transform: translateX(10px);
}
.next .intro {
  max-width: 520px;
}
/* a page that opens straight onto one of these sections needs less air above it */
main > .experience:first-of-type {
  padding-top: 84px;
}
main > .remote:first-of-type {
  padding-top: 84px;
}

/* ───────── experience: the moving wall of tiles ───────── */
.experience {
  overflow: clip; /* "clip", not "hidden": the scroll-linked motion inside must follow the page, not this box */
  padding-top: 150px;
  text-align: center;
}
.experience .intro {
  max-width: 835px;
  margin: 17px auto 0;
}
.wall {
  display: grid;
  gap: 14px;
  margin-top: 70px;
  padding-bottom: 140px;
}
/* each row slides sideways as the page scrolls (alternate rows in opposite directions) and stands
   still when the page does */
.wall-row {
  display: flex;
  gap: 14px;
  width: max-content;
  transform: translateX(-6%);
}
.wall-row:nth-child(even) {
  transform: translateX(-24%);
}
@keyframes wall-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-30%);
  }
}
@keyframes wall-right {
  from {
    transform: translateX(-30%);
  }
  to {
    transform: translateX(0);
  }
}
@supports (animation-timeline: view()) {
  .wall-row {
    animation: wall-left linear both;
    animation-timeline: view();
  }
  .wall-row:nth-child(even) {
    animation-name: wall-right;
  }
}
.wall-tile {
  display: flex;
  flex: none;
  align-items: flex-end;
  width: 250px;
  aspect-ratio: 16 / 9;
  padding: 16px 18px;
  border-radius: 22px;
  background: var(--alt);
  color: var(--ink);
  font-family: var(--display);
  font-stretch: 112%;
  font-size: 24px;
  line-height: 26px;
  font-weight: 750;
  letter-spacing: -0.02em;
  text-align: left;
}
.wall-tile b {
  position: relative;
  z-index: 2;
  font-weight: inherit;
}
.wall-tile.photo b {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
/* a tile filled with a stock clip: a still picture everywhere, and on computers the clip plays
   while the tile is on screen (script.js) */
.wall-tile.photo {
  position: relative;
  overflow: hidden;
  background: #151515;
  color: #fff;
}
.wall-tile.photo img,
.wall-tile.photo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wall-tile.photo video {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.wall-tile.photo video.on {
  opacity: 1;
}
.wall-tile.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.82));
}
.wall-tile.ink {
  background: var(--ink);
  color: #fff;
}
.wall-tile.orange {
  background: var(--orange);
  color: #fff;
}
.wall-tile.soft {
  background: var(--orange-soft);
  color: var(--orange-600);
}

/* ───────── rooms: words on the left, one television that stays put on the right ───────── */
.rooms {
  position: relative;
  margin: 0 10px;
  overflow: clip;
  border-radius: 44px;
}
.rooms-device {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 100vh;
  margin-bottom: -100vh;
  pointer-events: none;
}
.rooms-device .tv {
  position: absolute;
  left: calc(50% + 160px);
  top: 50%;
  width: 920px;
  transform: translateY(-50%);
}
.rooms-device .tv-frame {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 40px 60px -20px rgba(0, 0, 0, 0.4);
}
.rooms-device .tv-screen img {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.rooms-device .tv-screen img.on {
  opacity: 1;
}
.room {
  display: flex;
  align-items: center;
  min-height: 100vh;
  background: var(--bg, #fff);
}
.room-copy {
  width: 340px;
}
.room-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 26px;
  border-radius: 18px;
  background: radial-gradient(120% 120% at 30% 15%, #ff9440, var(--orange) 60%);
  box-shadow: 0 12px 24px -12px rgba(232, 95, 5, 0.7);
  color: #fff;
}
.room-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.room .copy + .copy {
  margin-top: 25px;
}
.room .caption {
  margin-top: 16px;
  font-size: 13px;
  line-height: 18px;
  color: var(--grey-3);
}
.room-media {
  display: none;
}
.room.tint .copy {
  color: var(--tint);
}
.room.tint .copy strong {
  color: #fff;
}
.room.tint .room-icon {
  background: #fff;
  color: var(--orange);
}
.room.tint .caption {
  color: var(--tint);
}

/* ───────── picture: the dark, full-width section ───────── */
.picture {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 96px);
  margin: 14px 10px 0;
  overflow: clip; /* "clip", not "hidden": the scroll-linked motion inside must follow the page, not this box */
  padding: 130px 0;
  border-radius: 44px;
  background: #000;
  color: #fff;
  text-align: center;
}
.picture::before,
.picture::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 48% at 22% 30%, rgba(232, 95, 5, 0.75), transparent 70%),
    radial-gradient(34% 42% at 80% 68%, rgba(255, 138, 42, 0.38), transparent 70%),
    radial-gradient(26% 30% at 62% 14%, rgba(201, 79, 0, 0.45), transparent 70%);
  filter: blur(30px);
}
@supports (animation-timeline: view()) {
  .picture::before {
    animation: drift linear both;
    animation-timeline: view();
  }
}
.picture::after {
  background: radial-gradient(60% 60% at 50% 50%, transparent 25%, rgba(0, 0, 0, 0.78) 100%);
  filter: none;
  animation: none;
}
@keyframes drift {
  from {
    transform: translate(-4%, 4%) rotate(-6deg);
  }
  to {
    transform: translate(4%, -4%) rotate(8deg) scale(1.08);
  }
}
.picture .content {
  position: relative;
  z-index: 1;
  width: 817px;
}
.picture .eyebrow {
  color: #ff9a52;
}
.picture .copy {
  max-width: 640px;
  margin: 24px auto 0;
  color: #c9c5bf;
}
.picture .copy strong {
  color: #fff;
}
.marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 38px;
}
.marks li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 11px 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  font-family: var(--display);
  font-stretch: 112%;
  font-size: 19px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.marks small {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ff9a52;
}

.detail {
  padding: 120px 0 140px;
  background: #fff;
}
.detail-stage {
  --tvw: min(692px, 100%);
  --hw: 0.52;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.detail-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 70px;
}

/* ───────── remote ───────── */
.remote {
  padding: 170px 0 150px;
  text-align: center;
}
.remote-stage {
  position: relative;
  width: 760px;
  max-width: 100%;
  margin: 90px auto 0;
  text-align: left;
}
.remote-img {
  width: 270px;
  margin-left: 40px;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.12)) drop-shadow(0 50px 60px rgba(0, 0, 0, 0.2));
}
.callout {
  position: absolute;
  left: 400px;
  width: 340px;
  top: var(--at);
}
.say {
  margin-bottom: 8px;
  font-family: var(--display);
  font-stretch: 112%;
  font-size: 42px;
  line-height: 44px;
  font-weight: 800;
  letter-spacing: -0.028em;
  background: linear-gradient(90deg, #ff8a2a, #e85f05 55%, #c2410c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.callout .copy {
  color: var(--grey);
}

/* ───────── tile sections ───────── */
.tiles {
  margin: 0 10px;
  padding: 130px 0 140px;
  border-radius: 44px;
  background: var(--alt);
  text-align: center;
}
.tiles + .tiles {
  margin-top: -44px;
}
.tiles + .tiles {
  padding-top: 0;
}
.tiles .intro {
  max-width: 735px;
  margin: 17px auto 0;
}
.tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 74px;
  text-align: left;
}
.tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 0 0 1px rgba(10, 10, 10, 0.03);
}
.tile.wide {
  flex-direction: row;
  align-items: center;
  grid-column: 1 / -1;
}
.tile-copy {
  padding: 40px 44px;
  font-size: 21px;
  line-height: 28px;
  font-weight: 450;
  letter-spacing: -0.014em;
  color: var(--grey);
}
.tile-copy .kicker {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange);
}
.tile-copy strong {
  font-weight: 650;
  color: var(--ink);
}
.tile.wide .tile-copy {
  flex: 1;
}
.tile-art {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  padding: 0 46px 46px;
}
.tile.wide .tile-art {
  padding: 44px 44px 44px 0;
}
.disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
}
.disc.ink {
  background: var(--ink);
}
.disc.soft {
  background: var(--orange-soft);
  color: var(--orange);
}
.disc svg {
  width: 70px;
  height: 70px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.drawing {
  width: 100%;
  max-width: 420px;
}
.drawing text {
  font-family: var(--font);
  font-size: 12px;
  fill: var(--grey-2);
}
/* small on-screen pieces of the OTV menus, redrawn for the tiles */
.ui-card {
  width: 300px;
  max-width: 100%;
  padding: 20px 24px 24px;
  border-radius: 6px;
  background: #7c8285;
  color: #fff;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.45);
}
.ui-card small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.8;
}
.ui-cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 14px;
  border: 1.5px solid #e1e5e7;
  border-radius: 6px;
}
.ui-cells span {
  height: 40px;
  font-size: 22px;
  line-height: 38px;
}
.ui-cells span + span {
  border-left: 1.5px solid #e1e5e7;
}
.ui-list {
  width: 300px;
  max-width: 100%;
  padding: 16px 0 10px;
  border-radius: 6px;
  background: #23272b;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.45);
}
.ui-list b {
  display: block;
  padding: 0 20px 10px;
  font-weight: 700;
}
.ui-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 20px;
}
.ui-list li::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1.5px solid #cfd6da;
  border-radius: 2px;
}
.ui-list li.on {
  background: rgba(255, 255, 255, 0.14);
}
.ui-list li.on::before {
  border-color: #6db6fa;
  background: #6db6fa;
}
.ui-toast {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 58px;
  padding: 0 28px 0 10px;
  border-radius: 29px;
  background: #fafcfc;
  color: #3e4649;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 16px 34px -12px rgba(0, 40, 50, 0.35);
}
.ui-toast svg {
  width: 40px;
  height: 40px;
}
.thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 470px;
}
.thumbs img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.4);
}

/* ───────── the specs at a glance: the badges printed on the box ───────── */
.glance-sec {
  margin: 0 10px;
  padding: 120px 0 130px;
  border-radius: 44px;
  background: var(--alt);
  text-align: center;
}
.tiles + .glance-sec,
.tiles + .inbox,
.glance-sec + .inbox {
  margin-top: 10px;
}
.glance {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 56px;
  text-align: left;
}
.glance li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 20px;
  border-radius: 24px;
  background: #fff;
}
.glance b {
  font-family: var(--display);
  font-stretch: 112%;
  font-size: 34px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -0.028em;
}
.glance span {
  font-size: 14px;
  line-height: 19px;
  font-weight: 500;
  color: var(--grey);
}
.glance .hot {
  background: radial-gradient(120% 130% at 25% 10%, #ff9a4a, var(--orange) 58%, #d95400);
  box-shadow: 0 18px 30px -18px rgba(232, 95, 5, 0.8);
  color: #fff;
}
.glance .hot span {
  color: rgba(255, 255, 255, 0.88);
}
/* on the tech-specs page the badges sit on white, so they take the canvas colour */
.ts-title + .glance {
  margin: 34px 0 26px;
}
.ts-title + .glance li:not(.hot) {
  background: var(--alt);
}

/* ───────── in the box ───────── */
.inbox {
  margin: 0 10px;
  border-radius: 44px;
  padding: 120px 0 130px;
  background: var(--alt);
  text-align: center;
}
.inbox-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 70px;
}
.inbox-grid li {
  font-size: 17px;
  line-height: 21px;
  font-weight: 600;
}
.inbox-grid svg {
  width: 92px;
  height: 92px;
  margin: 0 auto 18px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inbox .links {
  margin-top: 60px;
}

[hidden] {
  display: none !important;
}

/* ───────── footnotes and footer ───────── */
.foot {
  background: var(--alt);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  color: var(--grey-2);
}
.disclaimer {
  padding: 44px 0 40px;
  border-bottom: 1px solid var(--hair);
  text-align: center;
}
.disclaimer h2 {
  font-family: var(--display);
  font-stretch: 112%;
  font-size: 21px;
  line-height: 28px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.disclaimer p {
  max-width: 640px;
  margin: 10px auto 0;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.011em;
  color: var(--ink);
}
.legal-links {
  display: flex;
  gap: 20px;
}
.legal-links a {
  color: var(--grey-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.notes {
  padding: 17px 0 11px;
  border-bottom: 1px solid var(--hair);
}
.notes ol {
  padding-left: 17px;
  list-style: decimal;
}
.notes li,
.notes p {
  margin-bottom: 9px;
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 17px 0;
  border-bottom: 1px solid var(--hair);
}
.crumbs img {
  width: 30px;
}
.crumbs span::before {
  content: "›";
  margin-right: 10px;
  color: #b4b4b9;
}
.crumbs a {
  color: var(--grey-2);
}
.foot {
  font-family: var(--font);
}
.legal {
  padding: 17px 0 22px;
}
.legal p + p {
  margin-top: 6px;
}

/* ───────── tech specs page ───────── */
.ts-section {
  padding: 61px 0 56px;
  border-top: 1px solid var(--hair);
}
.ts-section:first-of-type {
  border-top: 0;
}
.ts-row {
  display: grid;
  grid-template-columns: 216px 1fr;
  column-gap: 29px;
}
.ts-head {
  margin-top: -3px;
  font-family: var(--display);
  font-stretch: 112%;
  font-size: 21px;
  line-height: 28px;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.ts-body {
  min-width: 0;
}
.ts-body p,
.ts-body li {
  margin-bottom: 14px;
}
.ts-body p:last-child,
.ts-body li:last-child {
  margin-bottom: 0;
}
.ts-body strong,
.ts-sub {
  font-weight: 650;
}
.ts-title {
  padding: 74px 0 6px;
}
.ts-title .headline-2 {
  margin-top: 12px;
}
.ts-sub {
  margin: 0 0 22px;
}
.ts-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.ts-cols.seven-five {
  grid-template-columns: 7fr 5fr;
}
.ts-cols.five-seven {
  grid-template-columns: 5fr 7fr;
}
.ts-fig {
  margin-bottom: 40px;
}
.ts-fig svg {
  width: 100%;
  max-width: 300px;
}
.ts-fig text {
  font-family: var(--font);
  font-size: 12px;
  fill: var(--grey-2);
}
.ts-note {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  color: var(--grey-2);
}
.cpu {
  width: 132px;
}
/* the remote with its labels either side */
.remote-map {
  position: relative;
  width: 132px;
  margin: 0 auto;
}
.remote-map img {
  width: 100%;
}
.remote-map span {
  position: absolute;
  top: var(--y);
  width: 110px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  color: var(--grey-2);
  transform: translateY(-50%);
}
.remote-map span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--line, 26px);
  height: 1px;
  background: #b4b4b9;
}
.remote-map .l {
  right: calc(100% + 34px);
  text-align: right;
}
.remote-map .l::after {
  left: calc(100% + 6px);
}
.remote-map .r {
  left: calc(100% + 34px);
}
.remote-map .r::after {
  right: calc(100% + 6px);
}

/* ───────── FAQ and contact pages ───────── */
.faq-head {
  padding: 84px 0 76px;
  text-align: center;
}
.faq-head .intro {
  max-width: 700px;
  margin: 18px auto 0;
}
.guides {
  margin: 0 10px;
  padding: 70px 0 110px;
  border-radius: 44px;
  background: var(--alt);
}
.guide-topic {
  margin: 44px 0 18px 8px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.guide-topic:first-child {
  margin-top: 0;
}
.guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.guide {
  padding: 10px 10px 28px;
  border-radius: 34px;
  background: #fff;
  scroll-margin-top: 90px;
}
.guide video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 26px;
  background: #eceae6;
}
.guide h3 {
  margin: 22px 18px 0;
  font-family: var(--display);
  font-stretch: 112%;
  font-size: 22px;
  line-height: 27px;
  font-weight: 750;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.guide ol {
  margin: 14px 18px 0;
  padding-left: 22px;
  list-style: decimal;
  font-size: 16px;
  line-height: 24px;
  color: var(--grey);
}
.guide li {
  padding-left: 4px;
}
.guide li + li {
  margin-top: 7px;
}
.guide li::marker {
  font-weight: 650;
  color: var(--orange);
}
/* a card left on its own in the last row stretches across, video on the left and words on the right */
.guide-grid > .guide:last-child:nth-child(odd) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column: 1 / -1;
  align-items: center;
  column-gap: 18px;
  padding-bottom: 10px;
}
.guide-grid > .guide:last-child:nth-child(odd) h3 {
  margin-top: 0;
}
.qa-sec {
  margin: 10px 10px 0;
  overflow: clip; /* "clip", not "hidden": the scroll-linked motion inside must follow the page, not this box */
  padding: 110px 0 110px;
  border-radius: 44px;
  background: radial-gradient(60% 60% at 50% 46%, #fbfaf9, #eceae6 100%);
  text-align: center;
}
/* The deck: soft white cards stacked on one another. The front card is flat; the ones behind
   are tilted and peek out underneath. Dealing the front card slides it away and the next comes up. */
.deck {
  max-width: 640px;
  margin: 54px auto 0;
  text-align: left;
}
.deck-cards {
  display: grid;
  gap: 12px;
}
.qcard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 32px 30px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 30px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f7f5 55%, #fdfdfc 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(30, 25, 15, 0.05),
    0 26px 50px -28px rgba(30, 25, 15, 0.3);
}
.qcard header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.qcard h3 {
  font-family: var(--display);
  font-stretch: 112%;
  font-size: 27px;
  line-height: 31px;
  font-weight: 800;
  letter-spacing: -0.026em;
  text-wrap: balance;
}
.qcard-n {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 15%, #ff9440, var(--orange) 60%);
  box-shadow: 0 10px 20px -10px rgba(232, 95, 5, 0.8);
  color: #fff;
  font-size: 16px;
  font-weight: 650;
}
.qcard-n i {
  font-style: normal;
  font-size: 11px;
  opacity: 0.8;
}
.qcard p {
  font-size: 17px;
  line-height: 26px;
  color: var(--grey);
}
.deck-ctl {
  display: none;
}
/* dealt as a stack once script.js is running */
.deck.stacked .deck-cards {
  gap: 0;
  padding-bottom: 46px;
}
.deck.stacked .qcard {
  grid-area: 1 / 1;
  cursor: pointer;
  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.4s ease,
    filter 0.4s ease,
    box-shadow 0.4s ease;
  will-change: transform;
}
.deck.stacked .qcard[data-pos="1"] {
  transform: translate(10px, 18px) rotate(2.4deg);
}
.deck.stacked .qcard[data-pos="2"] {
  transform: translate(-8px, 36px) rotate(-3.2deg);
}
.deck.stacked .qcard[data-pos="3"] {
  transform: translate(4px, 40px) rotate(5deg) scale(0.97);
  opacity: 0;
}
.deck.stacked .qcard:not([data-pos="0"]) > * {
  opacity: 0.35;
}
.deck.stacked .qcard.leaving,
.deck.stacked .qcard.entering {
  transform: translateX(54%) rotate(6deg);
  opacity: 0;
  filter: blur(8px);
}
.deck.stacked .qcard.entering {
  transition: none;
}
.deck.stacked .deck-ctl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}
.deck-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 24px -14px rgba(30, 25, 15, 0.4);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.deck-btn:hover {
  background: var(--orange);
  color: #fff;
  transform: scale(1.06);
}
.deck-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.deck-count {
  min-width: 64px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--grey);
}
.qa-more {
  margin-top: 44px;
  font-size: 19px;
  line-height: 27px;
  color: var(--grey);
}
.contact-head {
  padding-bottom: 54px;
}
.contact-sec {
  padding-bottom: 120px;
}
.cform,
.cform-done {
  max-width: 720px;
  margin: 0 auto;
  padding: 34px 34px 30px;
  border-radius: 34px;
  background: var(--alt);
}
.cform {
  display: grid;
  gap: 16px;
}
.cform-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cform label {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.006em;
}
.cform label i {
  font-style: normal;
  font-weight: 450;
  color: var(--grey-3);
}
.cform input,
.cform textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font: 450 17px/24px var(--font);
  letter-spacing: -0.011em;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cform textarea {
  min-height: 140px;
  resize: vertical;
}
.cform input:focus,
.cform textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(232, 95, 5, 0.16);
}
/* a field left empty or filled in wrongly, once sending has been tried */
.cform.tried input:invalid,
.cform.tried textarea:invalid {
  border-color: #d92d20;
}
.cform-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.cform-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 6px;
}
.cform .pill {
  border: 0;
  font-family: var(--font);
  cursor: pointer;
}
.cform .pill[disabled] {
  opacity: 0.6;
  cursor: default;
}
.cform-note {
  flex: 1;
  min-width: 220px;
  font-size: 13px;
  line-height: 18px;
  color: var(--grey-3);
}
.cform-status {
  font-size: 15px;
  line-height: 22px;
  color: #b42318;
}
.cform-status:empty {
  display: none;
}
.cform-done {
  padding: 54px 34px 56px;
  text-align: center;
}
.cform-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 15%, #ff9440, var(--orange) 60%);
  box-shadow: 0 14px 26px -12px rgba(232, 95, 5, 0.8);
}
.cform-tick svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cform-done h3 {
  margin-top: 22px;
  font-family: var(--display);
  font-stretch: 112%;
  font-size: 27px;
  line-height: 32px;
  font-weight: 800;
  letter-spacing: -0.026em;
}
.cform-done p {
  margin-top: 10px;
  color: var(--grey);
}
.cform-info {
  max-width: 520px;
  margin: 30px auto 0;
  text-align: center;
}

/* ───────── things rise into place as you scroll ─────────
   script.js marks headings, text, tiles, cards and badges with "rv". Each one's rise is tied to
   the scroll position itself (how far it has come into the window), not to a timer: scroll
   quickly and it arrives quickly, stop and it stops, and nothing is left animating afterwards.
   --i (0 to 3) lets neighbours in a group arrive slightly one after another.
   Only opacity and movement are animated, which browsers can do without redrawing the page. */
@keyframes rv-rise {
  from {
    opacity: 0;
    transform: translateY(54px) scale(0.955);
  }
}
@supports (animation-timeline: view()) {
  .js .rv {
    animation: rv-rise linear both;
    animation-timeline: view();
    animation-range: entry calc(var(--i, 0) * 6%) cover calc(20% + var(--i, 0) * 4%);
  }
}
/* pieces already on screen when the page opens are not tied to the scroll (they would sit half
   faded until you moved): they simply rise in once, quickly */
.js .rv-now {
  animation: rv-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
/* browsers without scroll-linked animation: a quick fade-up the first time each piece is seen */
@supports not (animation-timeline: view()) {
  .js .rv {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js .rv.in {
    opacity: 1;
    transform: none;
  }
}

/* ───────── medium screens ───────── */
@media (max-width: 1068px) {
  :root {
    --col: 692px;
  }
  .headline {
    font-size: 54px;
    line-height: 58px;
  }
  .headline-2 {
    font-size: 42px;
    line-height: 46px;
  }
  .intro,
  .copy,
  .tile-copy {
    font-size: 19px;
    line-height: 26px;
  }
  .localnav-menu a {
    padding: 0 10px;
  }
  .localnav-menu svg {
    display: none;
  }
  .hero-top .headline {
    font-size: 50px;
    line-height: 54px;
  }
  .xcard-art {
    height: 230px;
  }
  .xcard-copy strong {
    font-size: 21px;
    line-height: 25px;
  }
  .art-specs ul {
    width: 250px;
  }
  .hero-stage {
    --tvw: min(900px, 87.5vw, max(340px, calc((100vh - 440px) * 1.7778)));
  }
  .hero-intro {
    padding-bottom: 120px;
  }
  .experience {
    padding-top: 120px;
  }
  .wall-tile {
    width: 210px;
    font-size: 20px;
    line-height: 22px;
  }
  /* the television moves in with each room instead of staying put */
  .rooms-device {
    display: none;
  }
  .room {
    min-height: 0;
    padding: 90px 0;
  }
  .room .content {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    align-items: center;
    gap: 40px;
  }
  .room-copy {
    width: auto;
  }
  .room-media {
    display: block;
    filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.25));
  }
  .picture .content {
    width: var(--col);
  }
  .remote {
    padding: 150px 0 120px;
  }
  .remote-stage {
    width: 100%;
  }
  .remote-img {
    width: 230px;
    margin-left: 10px;
  }
  .callout {
    left: 310px;
    width: 330px;
  }
  .say {
    font-size: 34px;
    line-height: 36px;
  }
  .tiles {
    padding: 110px 0 120px;
  }
  .glance-sec {
    padding-bottom: 110px;
  }
  .glance b {
    font-size: 28px;
    line-height: 30px;
  }
  .glance li {
    padding: 18px;
  }
  .tile-copy {
    padding: 32px 34px;
  }
  .tile-art {
    padding: 0 34px 34px;
  }
  .inbox-grid svg {
    width: 76px;
    height: 76px;
  }
  .ts-row {
    grid-template-columns: 170px 1fr;
  }
}

/* ───────── phones ───────── */
@media (max-width: 734px) {
  :root {
    --col: 420px;
  }
  .localnav-in {
    padding: 0 8px 0 15px;
  }
  .localnav-title {
    gap: 9px;
    font-size: 15px;
  }
  .localnav-title img {
    width: 40px;
  }
  .localnav {
    top: 8px;
    width: calc(100% - 16px);
    height: auto;
    min-height: var(--nav-h);
    margin-top: 8px;
    border-radius: 18px;
  }
  .hero,
  .picture,
  .next,
  .tiles,
  .glance-sec,
  .inbox,
  .rooms {
    margin-inline: 8px;
    border-radius: 30px;
  }
  .hero {
    border-radius: 0 0 30px 30px;
  }
  .xcard {
    border-radius: 28px;
  }
  .xcard-art {
    border-radius: 20px;
  }
  .tile {
    border-radius: 26px;
  }
  .localnav-in {
    flex-wrap: wrap;
    min-height: var(--nav-h);
  }
  /* without scripts the buttons simply sit in a row that scrolls sideways */
  .localnav-menu {
    width: 100%;
    height: 48px;
    overflow-x: auto;
  }
  .js .nav-toggle {
    display: inline-flex;
  }
  /* with scripts they fold into a drop-down: one button per row, the current page in orange */
  .js .localnav-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    height: auto;
    padding: 2px 0 9px;
    overflow: visible;
  }
  .js .localnav.open .localnav-menu {
    display: flex;
  }
  .js .localnav.open {
    background: rgba(255, 255, 255, 0.97);
  }
  .js .localnav-menu a,
  .js .localnav-menu a[aria-current] {
    height: 46px;
    margin: 0;
    padding: 0 15px;
    border-radius: 11px;
    font-size: 16px;
  }
  .js .localnav-menu svg {
    display: block;
    width: 17px;
    height: 17px;
  }
  .faq-head {
    padding: 52px 0 48px;
  }
  .guides {
    margin-inline: 8px;
    padding: 44px 0 64px;
    border-radius: 30px;
  }
  .guide-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .guide {
    padding: 8px 8px 22px;
    border-radius: 28px;
  }
  .guide video {
    border-radius: 21px;
  }
  .guide h3 {
    margin: 18px 12px 0;
    font-size: 19px;
    line-height: 24px;
  }
  .guide ol {
    margin: 12px 12px 0;
    font-size: 15px;
    line-height: 22px;
  }
  .guide-grid > .guide:last-child:nth-child(odd) {
    display: block;
    padding-bottom: 22px;
  }
  .guide-grid > .guide:last-child:nth-child(odd) h3 {
    margin-top: 18px;
  }
  .qa-sec {
    margin: 8px 8px 0;
    padding: 70px 0 74px;
    border-radius: 30px;
  }
  .deck {
    margin-top: 36px;
  }
  .qcard {
    padding: 22px 22px 24px;
    border-radius: 24px;
  }
  .qcard h3 {
    font-size: 21px;
    line-height: 25px;
  }
  .qcard-n {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  .qcard p {
    font-size: 16px;
    line-height: 24px;
  }
  .contact-head {
    padding-bottom: 36px;
  }
  .contact-sec {
    padding-bottom: 80px;
  }
  .cform,
  .cform-done {
    padding: 22px 18px 22px;
    border-radius: 26px;
  }
  .cform-row {
    grid-template-columns: 1fr;
  }
  .cform input,
  .cform textarea {
    font-size: 16px;
  }
  .explore {
    padding: 84px 0 84px;
  }
  .explore-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 36px;
  }
  .xcard-art {
    height: 210px;
  }
  .art-screen img {
    left: 26px;
    top: 28px;
  }
  .art-dark b {
    font-size: 48px;
  }
  .art-remote img {
    width: 160px;
  }
  .xcard-copy {
    padding: 22px 24px 24px;
  }
  .xcard-copy strong {
    font-size: 21px;
    line-height: 25px;
  }
  .next a {
    padding: 64px 0 70px;
  }
  .glance-sec {
    padding-top: 84px;
  }
  .inbox {
    padding-top: 84px;
  }
  main > .experience:first-of-type,
  main > .remote:first-of-type {
    padding-top: 56px;
  }
  .eyebrow {
    font-size: 12px;
  }
  .headline {
    font-size: 36px;
    line-height: 40px;
  }
  .headline-2 {
    font-size: 30px;
    line-height: 34px;
  }
  .intro,
  .copy,
  .tile-copy {
    font-size: 17px;
    line-height: 24px;
  }
  .hero-top {
    padding-top: 30px;
  }
  .hero-top .headline {
    font-size: 34px;
    line-height: 38px;
  }
  .hero-stage {
    --tvw: 86vw;
    --hw: 0.5;
    padding-top: 24px;
  }
  .disclaimer {
    padding: 34px 0 30px;
  }
  .disclaimer p {
    font-size: 15px;
    line-height: 22px;
  }
  .hero-intro {
    padding-bottom: 84px;
  }
  .experience {
    padding-top: 90px;
  }
  .wall {
    gap: 10px;
    margin-top: 48px;
    padding-bottom: 84px;
  }
  .wall-row {
    gap: 10px;
  }
  .wall-tile {
    width: 160px;
    padding: 11px 13px;
    border-radius: 12px;
    font-size: 16px;
    line-height: 18px;
  }
  .room {
    padding: 64px 0;
  }
  .room .content {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .room-media {
    order: -1;
  }
  .room-icon {
    margin-bottom: 20px;
  }
  .picture {
    min-height: 0;
    margin-top: 10px;
    padding: 100px 0;
  }
  .marks li {
    padding: 9px 14px;
    font-size: 16px;
  }
  .detail-stage {
    --hw: 0.44;
  }
  .detail {
    padding: 80px 0 90px;
  }
  .detail-cols {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 44px;
  }
  .remote {
    padding: 100px 0 80px;
  }
  .remote-stage {
    display: grid;
    grid-template-columns: 108px 1fr;
    gap: 24px 22px;
    align-items: start;
    margin-top: 40px;
  }
  .remote-img {
    position: sticky;
    top: calc(var(--nav-h) + 28px);
    grid-row: 1 / span 6;
    width: 108px;
    margin: 0;
  }
  .callout {
    position: static;
    width: auto;
  }
  .callout .copy {
    font-size: 15px;
    line-height: 21px;
  }
  .say {
    font-size: 23px;
    line-height: 25px;
  }
  .glance-sec {
    padding-bottom: 84px;
  }
  .glance {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 36px;
  }
  .glance li {
    padding: 16px 16px 15px;
    border-radius: 16px;
  }
  .glance b {
    font-size: 26px;
    line-height: 28px;
  }
  .glance span {
    font-size: 13px;
    line-height: 17px;
  }
  .tiles {
    padding: 84px 0 84px;
  }
  .tile-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 44px;
  }
  .tile.wide {
    flex-direction: column;
    align-items: stretch;
  }
  .tile-copy {
    padding: 28px 26px;
  }
  .tile-art,
  .tile.wide .tile-art {
    min-height: 0;
    padding: 0 26px 30px;
  }
  .disc {
    width: 112px;
    height: 112px;
  }
  .disc svg {
    width: 54px;
    height: 54px;
  }
  .inbox {
    padding-bottom: 90px;
  }
  .inbox-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 12px;
    margin-top: 44px;
  }
  .inbox-grid li:last-child {
    grid-column: 1 / -1;
  }
  .ts-title {
    padding-top: 48px;
  }
  .ts-section {
    padding: 40px 0 38px;
  }
  .ts-row {
    grid-template-columns: 1fr;
    row-gap: 22px;
  }
  .ts-head {
    font-size: 19px;
    line-height: 25px;
  }
  .ts-cols,
  .ts-cols.seven-five,
  .ts-cols.five-seven {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .remote-map {
    width: 104px;
  }
  .remote-map span {
    width: 88px;
  }
  .remote-map .l {
    right: calc(100% + 24px);
  }
  .remote-map .r {
    left: calc(100% + 24px);
  }
  .remote-map span::after {
    width: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wall-row,
  .picture::before {
    animation: none;
  }
  .js .opening .w,
  .js .opening .tv,
  .js .opening .hw,
  .js .opening .led,
  .js .opening .hero-lockup,
  .js .opening .hero-intro {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .js .opening .hero-top .headline {
    visibility: visible;
  }
  .js .opening .tv-glow {
    animation: none !important;
    opacity: 0.42;
  }
  .js .rv,
  .js .rv-now {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .deck.stacked .qcard {
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* footnote numbers sit high without pushing the lines apart */
sup {
  font-size: 0.6em;
  line-height: 0;
  vertical-align: super;
}