/*
 * PC Remote Controller website — the apps' "Living-room Screen" world (see PRODUCT.md and the
 * desktop/Android DESIGN.md): deep-blue field, one cyan accent, real app captures, Roboto Flex.
 */
@font-face {
  font-family: 'Roboto Flex';
  src: url('../fonts/roboto-flex.woff2') format('woff2-variations');
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
}

:root {
  --field-top: #0b4f8a;
  --field-bottom: #06305a;
  --chrome: #052b52;
  --deep: #031a33;
  --ink: #ffffff;
  --mist: #cfe3f5;
  --pale: #b9d4ec;
  --accent: #2fb3ff;
  --on-accent: #04223f;
  --ok: #74e8ad;
  --error: #ffb4ab;
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.42);
  --surface: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.11);
  --surface-active: rgba(255, 255, 255, 0.17);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --header: 64px;
  --display: 'Roboto Flex', 'Segoe UI Variable Display', system-ui, sans-serif;
  --text: 'Roboto Flex', 'Segoe UI Variable Text', system-ui, sans-serif;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 16px);
  scrollbar-color: var(--line-strong) var(--field-bottom);
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--field-top) 0%, var(--field-bottom) 70%) fixed;
  color: var(--ink);
  font: 400 17px/1.6 var(--text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  /* A device sliding in from the side never widens the page; clip, unlike hidden, keeps sticky. */
  overflow-x: clip;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

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

a {
  color: inherit;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-strong);
}

a:hover {
  text-decoration-color: currentColor;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none; /* product shots are not drag-and-drop material */
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.wrap {
  width: min(1200px, 100% - 2 * clamp(20px, 4vw, 56px));
  margin-inline: auto;
}

.lead {
  max-width: 50ch;
  color: var(--mist);
  font-size: clamp(17px, 1.5vw, 20px);
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 30;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--on-accent);
  font-weight: 600;
}

.skip:focus {
  top: 12px;
}

/* ---------------------------------------------------------------------------------------------
 * Header: the desktop app's titlebar band.
 * ------------------------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 clamp(20px, 4vw, 56px);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.site-header.scrolled {
  background: rgba(5, 43, 82, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -12px rgba(0, 10, 30, 0.45);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  text-decoration: none;
}

.brand img {
  width: 30px;
  height: 30px;
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.site-nav a {
  color: var(--mist);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--ink);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle:hover {
  background: var(--surface-hover);
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 860px) {
  .nav-toggle {
    display: grid;
    place-items: center;
  }

  .site-nav {
    position: absolute;
    top: var(--header);
    left: 0;
    right: 0;
    display: none;
    padding: 12px clamp(20px, 4vw, 56px) 20px;
    background: var(--chrome);
    border-bottom: 1px solid var(--line);
  }

  .site-nav.open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 4px;
    font-size: 17px;
  }

  .site-nav a {
    display: block;
    padding: 10px 0;
  }
}

/* ---------------------------------------------------------------------------------------------
 * Store links: the page's one action. Google Play is primary, cyan like the apps' Enter/Send.
 * ------------------------------------------------------------------------------------------- */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 20px 8px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.15;
  transition:
    transform 0.4s var(--ease),
    background-color 0.2s;
}

.store small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.85;
}

.store svg {
  flex: none;
  width: 24px;
  height: 24px;
}

.store.primary {
  background: var(--accent);
  color: var(--on-accent);
}

.store.primary:hover {
  background: color-mix(in srgb, var(--accent) 86%, white);
}

.store.secondary {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.store.secondary:hover {
  background: var(--surface-hover);
}

.store:active {
  transform: translateY(1px);
}

/* The app chip's live dot: green is used for this one thing, as in the apps. */
.status {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--mist);
  font-size: 15px;
}

.status::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(116, 232, 173, 0.15);
}

/* Real device frames around real captures. */
.phone,
.tablet,
.window {
  box-shadow:
    0 30px 60px -12px rgba(0, 10, 30, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.phone {
  border: 5px solid var(--deep);
  border-radius: 6% / 2.7%;
  background: var(--deep);
}

.tablet {
  border: 6px solid var(--deep);
  border-radius: 2% / 3.2%;
  background: var(--deep);
}

.window {
  border-radius: 10px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------------------------
 * The opening: the whole family (PC, tablet, phone), the product line and both stores.
 * ------------------------------------------------------------------------------------------- */
.intro {
  position: relative;
  min-height: 100vh;
  margin-top: calc(-1 * var(--header));
  padding-top: var(--header);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding-block: 6vh;
}

.intro h1 {
  font-size: clamp(40px, 4.6vw, 66px);
  font-stretch: 108%;
  letter-spacing: -0.03em;
}

.intro .lead {
  margin-top: 22px;
}

.intro .stores {
  margin-top: 32px;
}

.trio {
  position: relative;
  aspect-ratio: 16 / 11;
}

.trio .window {
  position: absolute;
  left: 0;
  top: 0;
  width: 78%;
}

.trio .tablet {
  position: absolute;
  left: 30%;
  bottom: 4%;
  width: 46%;
}

.trio .phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 19%;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--pale);
  font-size: 14px;
  text-decoration: none;
}

.scroll-cue::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.scroll-cue:hover {
  color: var(--ink);
}

@media (max-width: 860px) {
  .intro {
    min-height: 0;
  }

  .intro-grid {
    grid-template-columns: 1fr;
    padding-block: 32px 72px;
  }

  .scroll-cue {
    display: none;
  }
}

/* ---------------------------------------------------------------------------------------------
 * Remote in Hand: chapters on the left, the device in your hand pinned on the right; its screen
 * follows the chapter being read. Reduced motion: instant swaps. Under 860px: no pin, inline captures.
 * ------------------------------------------------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 96px);
}

.chapters {
  padding-bottom: 12vh;
}

.chapter {
  min-height: 74vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding-block: 8vh;
}

.chapter.hero {
  min-height: calc(100vh - var(--header));
  padding-top: 4vh;
}

.chapter .big {
  font-size: clamp(44px, 6.4vw, 92px);
  font-stretch: 112%;
  letter-spacing: -0.035em;
}

.chapter h2 {
  font-size: clamp(30px, 3.6vw, 52px);
}

.chapter .result {
  width: min(440px, 100%);
  margin: 6px 0 0;
}

.chapter .facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--mist);
  font-size: 15px;
}

.chapter .facts li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

.hand {
  /* The wider devices stay centred and may grow past the column on both sides, but only by the
     smaller of the gap (text on the left) and the page margin (screen edge on the right). */
  --edge: min(
    clamp(32px, 6vw, 96px),
    (100vw - min(1200px, 100vw - 2 * clamp(20px, 4vw, 56px))) / 2
  );
  --reach: calc(100% + 2 * var(--edge) - 16px);
  position: sticky;
  top: calc(var(--header) + 24px);
  height: calc(100vh - var(--header) - 48px);
  display: grid;
  place-items: center;
}

.device {
  position: relative;
  /* The phone is 2400/1080 tall: cap its width so it always fits the pinned height. */
  width: min(330px, 100%, calc((100svh - var(--header) - 72px) * 1080 / 2400));
  aspect-ratio: 1080 / 2400;
  /* Shape changes snap (no layout animation); the screens crossfade. */
}

.device img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4.5% / 2%;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

.device img.on {
  opacity: 1;
}

.device::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 5px solid var(--deep);
  border-radius: 6% / 2.7%;
  pointer-events: none;
  box-shadow:
    0 40px 80px -16px rgba(0, 10, 30, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* The phone turns sideways for the full keyboard, and becomes the tablet for the tablet chapter. */
.device[data-shape='landscape'] img {
  border-radius: 2% / 4.5%;
}

.device[data-shape='landscape']::after {
  border-radius: 2.7% / 6%;
}

.device[data-shape='landscape'] {
  width: min(560px, 125%, var(--reach));
  aspect-ratio: 2400 / 1080;
}

.device[data-shape='tablet'] {
  width: min(620px, 140%, var(--reach), calc((100svh - var(--header) - 72px) * 2560 / 1600));
  aspect-ratio: 2560 / 1600;
}

.device[data-shape='tablet']::after {
  inset: -6px;
  border-width: 6px;
  border-radius: 2% / 3.2%;
}

.device[data-shape='tablet'] img {
  border-radius: 1.2% / 2%;
}

@media (prefers-reduced-motion: reduce) {
  .device,
  .device img {
    transition: none;
  }
}

/* On wide screens the pinned device shows the captures; these stay for screen readers. */
.inline-shot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

  .hand {
    display: none;
  }

  .inline-shot {
    position: static;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    display: block;
    width: min(270px, 72%);
    margin-top: 10px;
  }

  .inline-shot.wide {
    width: 100%;
  }

  .chapter,
  .chapter.hero {
    min-height: 0;
    padding-block: 48px;
  }
}

/* Tablets in portrait: the chapter's phone stands beside its text. The last row is flexible, so
   the phone's height lands there and the text rows keep their natural spacing. */
@media (min-width: 600px) and (max-width: 860px) {
  .chapter,
  .chapter.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    grid-template-rows: repeat(6, auto) 1fr;
    gap: 20px 40px;
    align-content: center;
  }

  .chapter > * {
    grid-column: 1;
  }

  .chapter > .inline-shot:not(.wide) {
    grid-column: 2;
    grid-row: 1 / 8;
    align-self: center;
    width: 100%;
    margin: 0;
  }

  .chapter > .inline-shot.wide {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------------------------------------
 * After the pin: full-width sections.
 * ------------------------------------------------------------------------------------------- */
.section {
  padding-block: clamp(72px, 10vw, 140px);
  border-top: 1px solid var(--line);
}

.section h2 {
  font-size: clamp(30px, 3.6vw, 52px);
}

.section .lead {
  margin-top: 16px;
}

/* Download: the desktop app's Home window with the phone in front, and the two stores. */
.download {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.download .stores {
  margin-top: 28px;
}

/* Reviews: real Play quotes, set as quotes, not as cards. */

.reviews {
  columns: 3 280px;
  column-gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
}

.review {
  break-inside: avoid;
  margin: 0 0 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.review blockquote {
  margin: 0;
  font: 500 clamp(19px, 1.6vw, 23px) / 1.35 var(--display);
}

.review blockquote p::before {
  content: '\201C';
}

.review blockquote p::after {
  content: '\201D';
}

.review figcaption {
  margin-top: 12px;
  color: var(--pale);
  font-size: 15px;
}

.review figcaption span {
  margin-left: 8px;
  opacity: 0.8;
}

/* FAQ: native disclosure, keyboard-ready. */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font: 600 19px / 1.35 var(--display);
  cursor: pointer;
  list-style: none;
}

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

.faq-item summary::after {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.faq-item p {
  max-width: 65ch;
  padding-bottom: 22px;
  color: var(--mist);
}

/* About the developer: his words, his photo. */
.about {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  max-width: 900px;
}

.about img {
  width: clamp(120px, 14vw, 180px);
  /* The photo file is portrait; the circle crops it from the top. */
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--surface-active);
}

.about p {
  max-width: 62ch;
  margin-top: 14px;
  color: var(--mist);
}

.about .links {
  display: flex;
  gap: 18px;
  margin-top: 18px;
  font-size: 15px;
}

@media (max-width: 860px) {
  .download,
  .faq,
  .about {
    grid-template-columns: 1fr;
  }
}

/* Contact: WinUI-style text boxes, label above. Field names are Formspree's contract. */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
}

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

.field {
  display: grid;
  gap: 8px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  color: var(--mist);
  font-size: 15px;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  caret-color: var(--accent);
}

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

.field input::placeholder,
.field textarea::placeholder {
  color: var(--pale);
}

.field input:focus,
.field textarea:focus {
  border-bottom-color: var(--accent);
  background: var(--surface-active);
}

.form button,
.newsletter button {
  justify-self: start;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 16px var(--text);
  cursor: pointer;
}

.form button:hover,
.newsletter button:hover {
  background: color-mix(in srgb, var(--accent) 86%, white);
}

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

/* ---------------------------------------------------------------------------------------------
 * Footer: the desktop app's bottom strip.
 * ------------------------------------------------------------------------------------------- */
.site-footer {
  padding: 56px 0 40px;
  border-top: 1px solid var(--line);
  background: rgba(3, 24, 48, 0.35);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
}

.newsletter p {
  margin-top: 8px;
  color: var(--mist);
  font-size: 15px;
}

.newsletter .row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.newsletter input[type='email'] {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.newsletter input[type='email']:focus {
  border-bottom-color: var(--accent);
  background: var(--surface-active);
}

@media (max-width: 400px) {
  .newsletter .row {
    flex-wrap: wrap;
  }

  .newsletter button {
    flex: 1 0 100%;
  }
}

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  color: var(--mist);
  font-size: 14px;
}

.consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: flex-end;
  color: var(--mist);
  font-size: 15px;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--ink);
}

.copyright {
  margin-top: 40px;
  color: var(--pale);
  font-size: 14px;
}

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

  .footer-links {
    justify-content: flex-start;
  }
}

/* ---------------------------------------------------------------------------------------------
 * Privacy policy: a calm reading page.
 * ------------------------------------------------------------------------------------------- */
.reading {
  max-width: 70ch;
  padding-block: clamp(56px, 8vw, 112px);
}

.reading h1 {
  font-size: clamp(36px, 4.4vw, 60px);
}

.reading .updated {
  margin-top: 12px;
  color: var(--pale);
}

.reading h2 {
  margin: 44px 0 12px;
  font-size: 24px;
}

.reading p,
.reading li {
  color: var(--mist);
}

.reading p + p {
  margin-top: 14px;
}

/* The 404 page: one short message, tall enough that the footer sits at the bottom of the screen. */
.reading.lost {
  min-height: calc(100svh - var(--header) - 320px);
}

.lost h1 + p {
  margin-top: 18px;
}

.lost p + p {
  margin-top: 28px;
}

.reading ul {
  margin: 12px 0 0;
  padding-left: 22px;
}

.reading li + li {
  margin-top: 8px;
}

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

.newsletter h2 {
  font-size: 22px;
}

/* ---------------------------------------------------------------------------------------------
 * Motion (owner picked A + B + C, 2026-10-09). All of it is off under prefers-reduced-motion.
 * B — the opening assembles once on load, from an already-visible start.
 * ------------------------------------------------------------------------------------------- */
@keyframes arrive {
  from {
    opacity: 0.35;
    transform: translateY(28px) scale(0.985);
  }
}

@keyframes arrive-side {
  from {
    opacity: 0.35;
    transform: translateX(36px);
  }
}

.trio .window {
  animation: arrive 0.9s var(--ease) both;
}

.trio .tablet {
  animation: arrive-side 0.9s 0.15s var(--ease) both;
}

.trio .phone {
  animation: arrive 0.9s 0.3s var(--ease) both;
}

/* A — "pick up the phone": while the opening scrolls away, the trio's phone flies into the hand. */
.flyer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 15;
  margin: 0;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
  visibility: hidden;
}

.flying .flyer {
  visibility: visible;
}

/* The first chapter's screen fades in on a clock, not with the scroll, so stopping mid-flight
   never leaves two screens blended. */
.flyer.next {
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.flyer.next.on {
  opacity: 1;
}

.flying .trio .phone,
.flying .device,
.before-pin .device {
  visibility: hidden;
}

.flying .trio .window,
.flying .trio .tablet {
  opacity: var(--fade, 1);
}

/* C — "try the touchpad": the PC window's cursor follows the pointer over the phone's touchpad. */
.try {
  position: relative;
}

.try .cursor {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 16px;
  height: 24px;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

/* The pinned touchpad is draggable like the real one: no image drag, no text selection. */
.device img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Only where the drag demo runs (mouse or trackpad): touch screens keep scrolling over the phone. */
@media (hover: hover) and (pointer: fine) {
  .device.pad {
    cursor: grab;
    touch-action: none;
  }

  .device.pad.dragging {
    cursor: grabbing;
  }
}

/* The Download section repeats the family without replaying the arrival, and without the flight. */
.trio.still .window,
.trio.still .tablet,
.trio.still .phone {
  animation: none;
}

.flying .trio.still .phone {
  visibility: visible;
}

.flying .trio.still .window,
.flying .trio.still .tablet {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .trio .window,
  .trio .tablet,
  .trio .phone {
    animation: none;
  }
}

/* The family is drawn small: frames in proportion to each device's size (the flying phone starts
   at the same 2px and grows into the pinned 5px). */
.trio .phone {
  border-width: 2px;
}

.trio .tablet {
  border-width: 3px;
}

/* Trust line under the stores: the proof in one quiet line, not a block of counters. */
.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin-top: 20px;
  /* Every item leads with a dot; the strip holding the dot that starts each line is clipped away,
     so a wrapped line never begins with a separator. 34px = the dot, its margins and the gap after it. */
  margin-left: -34px;
  clip-path: inset(0 0 0 34px);
  color: var(--mist);
  font-size: 15px;
}

.trust > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trust > span::before {
  content: '';
  width: 4px;
  height: 4px;
  margin: 0 12px;
  border-radius: 50%;
  background: var(--line-strong);
}

.trust strong {
  color: var(--ink);
  font-weight: 650;
}

.trust svg {
  width: 17px;
  height: 17px;
  color: #ffd166;
}

.device.snap img {
  transition: none;
}

/* The PC app in your hand: the tablet slides aside and the window comes in. */
.device[data-shape='desktop'] {
  width: min(640px, 150%, var(--reach));
  aspect-ratio: 720 / 470;
}

.device[data-shape='desktop']::after {
  inset: -1px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
}

.device[data-shape='desktop'] img {
  border-radius: 9px;
}

/* C's invitation: a pill and a ghost fingertip on the touchpad, until you drag yourself. */
.try-hint,
.ghost {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .demo .try-hint {
    position: absolute;
    left: 50%;
    top: 30%;
    display: block;
    margin: 0;
    padding: 8px 14px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(3, 24, 48, 0.78);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
  }

  .demo .ghost {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    box-shadow:
      0 0 0 6px rgba(255, 255, 255, 0.12),
      0 4px 12px rgba(0, 10, 30, 0.4);
    pointer-events: none;
    will-change: transform;
  }
}

/* Reduced motion: the ghost would sit still off the phone; the pill alone says "Try it". */
@media (prefers-reduced-motion: reduce) {
  .demo .ghost {
    display: none;
  }
}