:root {
  color-scheme: dark;
  --bg: #000;
  --bg-alt: #0e0e10;
  --surface: #161618;
  --surface-high: #1f1f22;
  --line: rgb(255 255 255 / 0.1);
  --line-strong: rgb(255 255 255 / 0.18);
  --text: #f5f5f7;
  --soft: #c2c2c7;
  --muted: #86868b;
  --accent: #6c4ef2;
  --accent-hover: #7d62f5;
  --accent-bright: #a594ff;
  --glow: 91 59 245;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(20px, 5vw, 64px);
  --page: 1240px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-hero: clamp(2.75rem, 1rem + 5.6vw, 6.5rem);
  --t-headline: clamp(2.5rem, 1.5rem + 5vw, 6rem);
  --t-title: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  --t-intro: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
}

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.47 var(--font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
fieldset {
  margin: 0;
}

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

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}

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

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

fieldset {
  padding: 0;
  border: 0;
  min-width: 0;
}

code {
  font-family: var(--mono);
}

::selection {
  background: rgb(var(--glow) / 0.55);
  color: #fff;
}

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

.skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--text);
  color: #000;
  font-weight: 600;
  translate: 0 -200%;
}

.skip:focus {
  translate: 0;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--page));
  margin-inline: auto;
}

.wrap-narrow {
  --page: 820px;
}

/* Navigation */

.nav {
  position: fixed;
  inset: 12px var(--gutter) auto;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.nav-bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 1000px);
  height: 52px;
  padding: 0 10px 0 14px;
  border-radius: 18px;
  background: rgb(22 22 24 / 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 8px 32px rgb(0 0 0 / 0.35);
}

.nav-home {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.nav-home img {
  border-radius: 7px;
  outline: 1px solid rgb(255 255 255 / 0.14);
  outline-offset: -1px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 99px;
  color: var(--soft);
  transition: color 0.15s ease-out;
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--text);
}

.nav-soon {
  padding: 0 8px 0 4px;
  color: var(--muted);
  white-space: nowrap;
}

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 99px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background-color 0.15s ease-out,
    scale 0.15s ease-out;
}

/* A 32 px control gets a 44 px touch area. */
.pill::after,
.nav-link::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}

.pill:active,
.button:active,
.tab:active,
.round:active {
  scale: 0.96;
}

.pill-quiet {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.pill-quiet:hover {
  background: rgb(255 255 255 / 0.1);
}

.pill-accent {
  background: var(--accent);
  color: #fff;
}

.pill-accent:hover {
  background: var(--accent-hover);
}

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

@media (max-width: 400px) {
  :root {
    --gutter: 16px;
  }

  .nav-bar {
    gap: 4px;
    padding: 0 8px 0 10px;
  }

  .nav-home {
    gap: 8px;
    font-size: 1.0625rem;
  }

  .nav-links {
    gap: 2px;
  }

  .nav-link {
    padding: 0 8px;
  }

  .pill {
    padding: 0 12px;
  }
}

/* Buttons and links */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 99px;
  font-size: 1.0625rem;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background-color 0.15s ease-out,
    scale 0.15s ease-out;
}

.button-large {
  min-height: 52px;
  padding: 0 30px;
  font-size: 1.1875rem;
}

.button-accent {
  background: var(--accent);
  color: #fff;
}

.button-accent:hover {
  background: var(--accent-hover);
}

.button-light {
  background: var(--text);
  color: #000;
}

.button-light:hover {
  background: #fff;
}

.soon {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--soft);
  font-weight: 500;
}

.soon-large {
  min-height: 52px;
  padding: 0 28px;
  font-size: 1.1875rem;
}

.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent-bright);
  font-weight: 500;
}

.link::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.4em;
  border: solid currentColor;
  border-width: 1.5px 1.5px 0 0;
  rotate: 45deg;
  transition: translate 0.15s ease-out;
}

.link:hover::after {
  translate: 3px 0;
}

.link-inline {
  color: var(--accent-bright);
  text-decoration: underline;
  text-decoration-color: rgb(165 148 255 / 0.4);
  text-underline-offset: 0.18em;
}

.link-inline:hover {
  text-decoration-color: currentColor;
}

.fine {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.43;
}

.fine code {
  color: var(--soft);
  font-size: 0.93em;
}

/* Copy button: the two icons cross-fade */

.copy {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--soft);
  font-size: 0.8125rem;
  font-weight: 500;
  transition:
    background-color 0.15s ease-out,
    color 0.15s ease-out;
}

.copy::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}

.copy:hover {
  background: rgb(255 255 255 / 0.1);
  color: var(--text);
}

.copy.is-copied {
  color: var(--accent-bright);
}

.copy-icons {
  position: relative;
  width: 16px;
  height: 16px;
}

.copy-icons svg {
  position: absolute;
  inset: 0;
  transition:
    opacity 0.2s var(--ease),
    scale 0.2s var(--ease),
    filter 0.2s var(--ease);
}

.copy-icons svg:last-child,
.copy.is-copied .copy-icons svg:first-child {
  opacity: 0;
  scale: 0.25;
  filter: blur(4px);
}

.copy.is-copied .copy-icons svg:last-child {
  opacity: 1;
  scale: 1;
  filter: none;
}

.copy-label {
  min-width: 3.5em;
  text-align: left;
}

/* One-line install */

.install {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 6px 6px 20px;
  border-radius: 22px;
  background: rgb(30 30 33 / 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.install-code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  padding: 10px 0;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  scrollbar-width: none;
}

.install-code::-webkit-scrollbar {
  display: none;
}

.install-prompt {
  color: var(--accent-bright);
  user-select: none;
}

.install .copy {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 16px;
  background: var(--accent);
  color: #fff;
}

.install .copy::after {
  inset: -2px 0;
}

.install .copy:hover {
  background: var(--accent-hover);
}

.hero .install-code {
  font-size: 0.8125rem;
}

.hero .install .copy {
  padding: 0 12px;
}

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

/* Hero */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: max(660px, min(100svh, 60rem));
  overflow: clip;
}

.hero-stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(14px, 3.2vw, 48px);
  padding-top: clamp(92px, 13vh, 132px);
  -webkit-mask-image: linear-gradient(#000 30%, transparent 61%);
  mask-image: linear-gradient(#000 30%, transparent 61%);
}

.hero-stage::before {
  content: "";
  position: absolute;
  top: -8%;
  left: 50%;
  z-index: -1;
  width: min(1320px, 160vw);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgb(var(--glow) / 0.78), rgb(var(--glow) / 0.26) 50%, transparent);
  translate: -50%;
}

.hero-stage .device {
  flex: none;
  width: clamp(168px, 22vw, 316px);
}

.hero-stage .device:nth-child(odd) {
  margin-top: clamp(36px, 6.5vw, 92px);
}

.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 33rem);
  align-items: end;
  gap: 28px clamp(32px, 4vw, 56px);
  padding-bottom: clamp(36px, 7vh, 72px);
}

.hero-name {
  display: block;
  margin-bottom: 0.3em;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.125;
}

.hero-line {
  display: block;
  font-size: var(--t-hero);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.hero-title {
  font-size: inherit;
  font-weight: inherit;
}

.hero-intro {
  margin-bottom: 18px;
  color: var(--soft);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.41;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 14px;
}

/* Below this width the copy does not fit beside itself: the phones get a band, and the copy starts under it. */
@media (max-width: 1180px) {
  .hero {
    --phone: clamp(164px, 26vw, 264px);
    min-height: 0;
  }

  .hero-stage {
    inset: 0 0 auto;
    height: calc(84px + var(--phone) * 1.72);
    padding-top: 84px;
    -webkit-mask-image: linear-gradient(#000 48%, transparent 96%);
    mask-image: linear-gradient(#000 48%, transparent 96%);
  }

  .hero-stage .device {
    width: var(--phone);
  }

  .hero-copy {
    grid-template-columns: minmax(0, 1fr);
    padding-top: calc(84px + var(--phone) * 1.5);
  }

  .hero-action {
    max-width: 36rem;
  }
}

/* Sections and type */

.section {
  padding-block: clamp(88px, 13vw, 176px);
}

.section-alt {
  background: var(--bg-alt);
}

.eyebrow {
  color: var(--muted);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.19;
}

.headline {
  margin-top: 0.12em;
  font-size: var(--t-headline);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.headline-tight {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
}

.title {
  font-size: var(--t-title);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.005em;
}

.intro {
  max-width: 40rem;
  color: var(--muted);
  font-size: var(--t-intro);
  font-weight: 600;
  line-height: 1.381;
}

.intro strong {
  color: var(--text);
  font-weight: inherit;
}

.lockup .intro,
.columns-text .intro {
  margin-top: clamp(20px, 2.5vw, 32px);
}

.lockup-center {
  text-align: center;
}

.lockup-center .intro {
  margin-inline: auto;
}

/* Highlights */

.highlights {
  padding-bottom: clamp(72px, 10vw, 128px);
}

.highlights-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.gallery-controls {
  display: flex;
  gap: 12px;
}

.gallery-controls[hidden] {
  display: none;
}

.round {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  transition:
    background-color 0.15s ease-out,
    opacity 0.15s ease-out,
    scale 0.15s ease-out;
}

.round::after {
  content: "";
  position: absolute;
  inset: -4px;
}

.round:hover {
  background: rgb(255 255 255 / 0.2);
}

.round:disabled {
  opacity: 0.35;
  cursor: default;
}

.gallery {
  --edge: max(var(--gutter), (100vw - var(--page)) / 2);
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-inline: var(--edge);
  scroll-padding-inline: var(--edge);
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

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

.gallery:focus-visible {
  outline-offset: -2px;
}

/* Each card has a caption and one capture. The card cuts the phone at its lower edge. */
.card {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(272px, 80vw, 448px);
  height: clamp(520px, 150vw, 640px);
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(90% 55% at 50% 100%, rgb(var(--glow) / 0.42), transparent 72%),
    var(--surface);
  scroll-snap-align: start;
}

.card-caption {
  display: flex;
  align-items: center;
  min-height: 4.6em;
  max-width: 17em;
  margin-top: clamp(20px, 3vw, 28px);
  padding-inline: 24px;
  font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.17;
  text-align: center;
  text-wrap: balance;
}

.card-visual {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 0;
  padding: 16px 24px 0;
}

.card .phone {
  flex: none;
  width: min(100%, 300px);
}

.card-screens .phone {
  width: min(64%, 250px);
}

.card-screens .watch {
  flex: none;
  width: min(30%, 124px);
  margin-top: 34%;
}

/* Device frames, drawn in CSS. The pixels inside are captures of the app. Sizes use container units, so a frame scales with its width. */

.device {
  container-type: inline-size;
  width: 100%;
}

.device-body {
  position: relative;
  padding: 2.6cqw;
  border-radius: 16.2cqw;
  background: linear-gradient(145deg, #3a3a40, #17171a 38%, #232327 70%, #101012);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    0 0 0 1px #000,
    0 3cqw 9cqw rgb(0 0 0 / 0.55);
}

.device-screen {
  overflow: hidden;
  border-radius: 13.6cqw;
  background: #000;
  aspect-ratio: 1206 / 2622;
}

.device-screen > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The upper part of a phone, for a capture of the open Dynamic Island. */
.phone-top .device-body {
  padding-bottom: 0;
  border-radius: 16.2cqw 16.2cqw 0 0;
}

.phone-top .device-screen {
  border-radius: 13.6cqw 13.6cqw 0 0;
  aspect-ratio: 660 / 416;
}

.phone-top {
  -webkit-mask-image: linear-gradient(#000 62%, transparent);
  mask-image: linear-gradient(#000 62%, transparent);
}

.ipad .device-body {
  padding: 1.5cqw;
  border-radius: 4.2cqw;
}

.ipad .device-screen {
  border-radius: 2.7cqw;
  aspect-ratio: 4 / 3;
}

.watch .device-body {
  padding: 5cqw;
  border-radius: 27cqw;
}

.watch .device-body::after {
  content: "";
  position: absolute;
  top: 22%;
  right: -3.4cqw;
  width: 3.4cqw;
  height: 17%;
  border-radius: 0 2cqw 2cqw 0;
  background: linear-gradient(#3a3a40, #17171a);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

.watch .device-screen {
  border-radius: 22cqw;
  aspect-ratio: 416 / 496;
}

/* Story sections */

.duo {
  position: relative;
  margin: clamp(40px, 6vw, 88px) auto 0;
  max-width: 1040px;
  padding-right: clamp(40px, 9vw, 120px);
}

.duo .phone {
  position: absolute;
  right: 0;
  bottom: -6%;
  width: clamp(104px, 23%, 232px);
}

.story .intro-center {
  max-width: 52rem;
  margin: clamp(72px, 10vw, 136px) auto 0;
  text-align: center;
}

/* The four places where a person answers a question. */
.ways {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 40px clamp(16px, 3vw, 40px);
  margin-top: clamp(48px, 7vw, 96px);
}

.way {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.way .phone {
  width: min(100%, 272px);
}

.way .watch {
  width: min(66%, 176px);
}

.way figcaption {
  min-height: 6.4em;
  max-width: 15em;
  margin-top: clamp(20px, 2.4vw, 32px);
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-align: center;
}

.way figcaption strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 600;
}

.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px clamp(40px, 7vw, 112px);
}

.columns-reverse .columns-text {
  order: 2;
}

.pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(16px, 3vw, 36px);
}

.pair .phone {
  flex: none;
  width: clamp(150px, 20vw, 250px);
}

.pair .phone:last-child {
  margin-bottom: 10%;
}

.live {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 32px);
}

.live .phone {
  flex: none;
  width: clamp(150px, 21vw, 270px);
}

.live .phone-top {
  margin-top: 12%;
}

/* The layout picker shows one capture of each set. */
.live-shot {
  display: none;
}

.live-shot-ring {
  display: block;
}

#live-activities:has(input[value="bar"]:checked) .live-shot-ring,
#live-activities:has(input[value="note"]:checked) .live-shot-ring,
#live-activities:has(input[value="minimal"]:checked) .live-shot-ring {
  display: none;
}

#live-activities:has(input[value="bar"]:checked) .live-shot-bar,
#live-activities:has(input[value="note"]:checked) .live-shot-note,
#live-activities:has(input[value="minimal"]:checked) .live-shot-minimal {
  display: block;
}

.picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.picker legend {
  width: 100%;
  margin-bottom: 12px;
  padding: 0;
  color: var(--soft);
  font-size: 0.9375rem;
  font-weight: 500;
}

.choice {
  position: relative;
  cursor: pointer;
}

.choice input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.1);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background-color 0.15s ease-out,
    color 0.15s ease-out;
}

.choice:hover span {
  background: rgb(255 255 255 / 0.16);
}

.choice input:checked + span {
  background: var(--text);
  color: #000;
}

.choice input:focus-visible + span {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

/* Without :has(), the picker cannot change the capture. */
@supports not selector(:has(*)) {
  .picker {
    display: none;
  }
}

.points {
  display: grid;
  gap: 0;
  margin: clamp(28px, 3vw, 40px) 0 12px;
  border-top: 1px solid var(--line);
}

.points li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.points h3 {
  font-size: 1.0625rem;
  font-weight: 600;
}

.points p {
  margin-top: 2px;
  color: var(--muted);
}

/* Bento */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(40px, 6vw, 80px);
}

.tile {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  height: clamp(480px, 46vw, 560px);
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(90% 50% at 50% 100%, rgb(var(--glow) / 0.3), transparent 72%),
    var(--surface);
}

.tile-wide {
  grid-column: span 7;
}

.tile-text {
  max-width: 30em;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) 0;
}

.tile-title {
  margin-bottom: 6px;
  font-size: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.17;
}

.tile-text p {
  color: var(--muted);
}

/* The tile cuts a phone or an iPad at its lower edge. */
.tile-visual {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 28px);
  min-height: 0;
  padding: 28px clamp(24px, 3vw, 36px) 0;
}

.tile-visual .phone {
  flex: none;
  width: min(46%, 236px);
}

.tile-visual .phone:only-child {
  width: min(72%, 264px);
}

.tile-visual-watch {
  align-items: center;
  padding-bottom: clamp(24px, 3vw, 36px);
}

.tile-visual-watch .watch {
  flex: none;
  width: min(40%, 168px);
}

.tile-visual-ipad {
  justify-content: flex-start;
  padding-right: 0;
}

.tile-visual-ipad .ipad {
  flex: none;
  width: 118%;
}

/* Summary */

.relay {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(36px, 5vw, 64px);
}

.relay li {
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}

.relay-from {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.26;
}

.relay-to {
  margin-top: 10px;
  color: var(--muted);
}

/* Connect */

.connect-primary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 16px;
  margin-top: clamp(32px, 4vw, 48px);
  text-align: center;
}

.connect-primary .install {
  width: min(100%, 740px);
  padding-left: 24px;
  border-radius: 26px;
}

.connect-primary .install-code {
  padding-block: 14px;
  font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1rem);
  text-align: left;
}

.connect-primary .copy {
  min-height: 44px;
  border-radius: 20px;
}

.connect-manual {
  margin-top: clamp(64px, 8vw, 104px);
  font-size: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.17;
}

.connect-key {
  margin: 6px 0 24px;
}

.tab-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-inline: -4px;
  padding: 4px;
  scrollbar-width: none;
}

.tab-list::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.1);
  font-weight: 500;
  white-space: nowrap;
  transition:
    background-color 0.15s ease-out,
    color 0.15s ease-out,
    scale 0.15s ease-out;
}

.tab:hover {
  background: rgb(255 255 255 / 0.16);
}

.tab[aria-selected="true"] {
  background: var(--text);
  color: #000;
}

/* Brand marks: the official files of the app, shown at one size. A mark with its own colors is an image.
   A one-color mark is a mask, so it takes the text color of the tab, white or black. */
.mark {
  flex: none;
  width: 18px;
  height: 18px;
}

.mark-mask {
  background: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}

/* This file has a wide clear space around the mark. The larger mask gives it the size of the others. */
.mark-openai {
  -webkit-mask-size: 200%;
  mask-size: 200%;
}

.tab-panel-title .mark {
  display: none;
}

.tabs:not(.is-ready) .tab-list,
.tabs.is-ready .tab-panel-title {
  display: none;
}

.tab-panel {
  display: grid;
  gap: 28px;
  margin-top: 28px;
  border-radius: 8px;
}

.tab-panel[hidden] {
  display: none;
}

.tab-panel-title {
  font-size: 1.1875rem;
  font-weight: 600;
}

.step {
  display: grid;
  justify-items: start;
  gap: 10px;
}

.step > .code {
  width: 100%;
}

.step-title {
  font-weight: 600;
}

.step-note {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.43;
}

/* Code */

.code {
  overflow: hidden;
  border-radius: 16px;
  background: #0a0a0c;
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: left;
}

.code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 6px 0 16px;
  border-bottom: 1px solid var(--line);
}

.code-title {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.code pre {
  margin: 0;
  overflow-x: auto;
  padding: 16px;
  font: 400 0.875rem/1.6 var(--mono);
  tab-size: 2;
}

.code pre:focus-visible {
  outline-offset: -3px;
  border-radius: 0 0 16px 16px;
}

.t-c,
.t-ch,
.t-cm,
.t-c1,
.t-cs,
.t-cp,
.t-cpf {
  color: #8e8e93;
}

.t-k,
.t-kc,
.t-kd,
.t-kn,
.t-kp,
.t-kr,
.t-kt,
.t-nt,
.t-nb,
.t-na,
.t-nc,
.t-nf {
  color: var(--accent-bright);
}

.t-s,
.t-s1,
.t-s2,
.t-sa,
.t-sb,
.t-sc,
.t-sd,
.t-se,
.t-sh,
.t-si,
.t-sr,
.t-ss,
.t-sx,
.t-dl {
  color: #d9d1ff;
}

.t-m,
.t-mi,
.t-mf,
.t-mh,
.t-mo,
.t-il,
.t-nv,
.t-no {
  color: #f5f5f7;
}

.t-p,
.t-o,
.t-ow {
  color: #98989e;
}

/* Panel */

.panel {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: 40px clamp(32px, 6vw, 88px);
  overflow: hidden;
  padding: clamp(32px, 6vw, 80px);
  border-radius: 28px;
  background:
    radial-gradient(70% 90% at 100% 100%, rgb(var(--glow) / 0.5), transparent 70%),
    #050506;
}

.panel-text .title {
  margin-top: 0.12em;
}

.panel-text .intro {
  margin-top: 20px;
}

.panel-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 28px;
}

.panel-docs {
  padding: 6px 20px;
  border-radius: 20px;
  background: rgb(12 12 14 / 0.62);
  box-shadow: inset 0 0 0 1px var(--line);
}

.panel-docs a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  font-weight: 500;
  transition: color 0.15s ease-out;
}

.panel-docs li + li a {
  border-top: 1px solid var(--line);
}

.panel-docs svg {
  flex: none;
  color: var(--muted);
  transition: translate 0.15s ease-out;
}

.panel-docs a:hover {
  color: var(--accent-bright);
}

.panel-docs a:hover svg {
  translate: 3px 0;
}

/* Closing and footer */

.closing {
  background: radial-gradient(60% 70% at 50% 110%, rgb(var(--glow) / 0.42), transparent 70%);
}

.closing-icon {
  margin: 0 auto 28px;
  border-radius: 22px;
  outline: 1px solid rgb(255 255 255 / 0.14);
  outline-offset: -1px;
}

.closing .intro {
  margin-top: 16px;
}

.closing-action {
  margin-top: 32px;
}

.footer {
  padding: 40px 0 48px;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.footer-note {
  max-width: 62em;
  margin-bottom: 8px;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--soft);
}

.footer-links a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Pages with long text: docs, privacy, terms, support */

.page {
  width: min(100% - 2 * var(--gutter), 720px);
  margin-inline: auto;
  padding: clamp(120px, 16vw, 176px) 0 clamp(72px, 10vw, 128px);
}

.prose {
  color: var(--soft);
  line-height: 1.59;
  overflow-wrap: break-word;
}

.prose > :first-child {
  margin-top: 0;
}

.prose h1 {
  color: var(--text);
  font-size: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.01em;
}

.prose h2 {
  margin-top: 2.4em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: clamp(1.5rem, 1.35rem + 0.7vw, 1.875rem);
  font-weight: 600;
  line-height: 1.14;
}

.prose h3 {
  margin-top: 2em;
  color: var(--text);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.19;
}

.prose h4 {
  margin-top: 1.6em;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 600;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose .code,
.prose .table-wrap {
  margin-top: 1em;
}

.prose h1 + p {
  margin-top: 1.4em;
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li {
  margin-top: 0.4em;
  padding-left: 0.2em;
}

.prose li::marker {
  color: var(--muted);
}

.prose li > ul,
.prose li > ol {
  margin-top: 0.4em;
}

.prose strong {
  color: var(--text);
  font-weight: 600;
}

.prose a:not(.anchor) {
  color: var(--accent-bright);
  text-decoration: underline;
  text-decoration-color: rgb(165 148 255 / 0.4);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.15s ease-out;
}

.prose a:not(.anchor):hover {
  text-decoration-color: currentColor;
}

.prose :not(pre) > code {
  padding: 0.14em 0.4em;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.09);
  color: var(--text);
  font-size: 0.86em;
}

.prose blockquote {
  margin-inline: 0;
  padding-left: 1.1em;
  border-left: 2px solid var(--accent);
  color: var(--text);
}

.prose hr {
  margin: 2.4em 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.prose .lead {
  color: var(--text);
  font-size: var(--t-intro);
  font-weight: 500;
  line-height: 1.42;
}

.prose .updated {
  margin-top: 1em;
  color: var(--muted);
  font-size: 0.875rem;
}

.anchor {
  margin-left: 0.4em;
  padding: 0 0.2em;
  border-radius: 6px;
  color: var(--muted);
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

:is(h2, h3, h4):hover > .anchor,
.anchor:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .anchor {
    opacity: 0.6;
  }
}

.table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.table-wrap:focus-visible {
  outline-offset: 2px;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.prose th,
.prose td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: rgb(255 255 255 / 0.04);
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.prose tr:last-child td {
  border-bottom: 0;
}

.prose td code {
  white-space: nowrap;
}

/* Docs layout */

.docs {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 208px;
  align-items: start;
  gap: clamp(32px, 4vw, 64px);
  width: min(100% - 2 * var(--gutter), 1320px);
  margin-inline: auto;
  padding: 112px 0 clamp(72px, 10vw, 128px);
}

.docs-home {
  grid-template-columns: 220px minmax(0, 760px);
}

.docs-side,
.docs-toc {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  font-size: 0.9375rem;
  scrollbar-width: thin;
}

.docs-side-title,
.docs-toc-title {
  margin-bottom: 6px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.docs-side-title a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

.docs-side-title a:hover,
.docs-side-title a[aria-current="page"] {
  color: var(--text);
}

.docs-side li a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 10px;
  color: var(--soft);
  line-height: 1.3;
  transition:
    background-color 0.15s ease-out,
    color 0.15s ease-out;
}

.docs-side li a:hover {
  background: rgb(255 255 255 / 0.06);
  color: var(--text);
}

.docs-side li a[aria-current="page"] {
  background: rgb(var(--glow) / 0.28);
  color: var(--text);
  font-weight: 600;
}

.docs-side a:focus-visible,
.docs-toc a:focus-visible {
  outline-offset: -2px;
}

.docs-toc ul {
  border-left: 1px solid var(--line);
}

.docs-toc a {
  display: block;
  margin-left: -1px;
  padding: 6px 12px;
  border-left: 1px solid transparent;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.35;
  transition:
    color 0.15s ease-out,
    border-color 0.15s ease-out;
}

.docs-toc .toc-level-3 a {
  padding-left: 24px;
}

.docs-toc a:hover {
  color: var(--text);
}

.docs-toc a.is-current {
  border-left-color: var(--accent-bright);
  color: var(--text);
}

.docs-article {
  min-width: 0;
  max-width: 760px;
}

.docs-head .intro {
  margin-top: 16px;
}

.quick {
  margin-top: 40px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 24px;
  background: var(--surface);
}

.quick-title {
  font-size: 1.3125rem;
  font-weight: 600;
}

.quick-steps {
  margin: 10px 0 16px;
  padding-left: 1.3em;
  color: var(--soft);
  list-style: decimal;
}

.quick-steps li {
  margin-top: 4px;
  padding-left: 0.2em;
}

.quick .fine {
  margin-top: 14px;
}

.doc-list {
  margin-top: 40px;
  border-top: 1px solid var(--line);
}

.doc-list a {
  display: grid;
  gap: 2px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.doc-list-title {
  font-size: 1.1875rem;
  font-weight: 600;
  transition: color 0.15s ease-out;
}

.doc-list a:hover .doc-list-title {
  color: var(--accent-bright);
}

.doc-list-summary {
  color: var(--muted);
}

.docs-source {
  margin-top: 28px;
}

.pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 64px;
}

.pager-link {
  display: grid;
  gap: 2px;
  padding: 16px 20px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 0.15s ease-out;
}

.pager-link:hover {
  background: rgb(255 255 255 / 0.05);
}

.pager-next {
  text-align: right;
}

.pager-label {
  color: var(--muted);
  font-size: 0.8125rem;
}

.pager-title {
  font-weight: 600;
}

@media (max-width: 1120px) {
  .docs {
    grid-template-columns: 208px minmax(0, 1fr);
  }

  .docs-toc {
    display: none;
  }
}

@media (max-width: 800px) {
  .docs,
  .docs-home {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-top: 88px;
  }

  .docs-side {
    position: static;
    max-height: none;
    margin-inline: calc(-1 * var(--gutter));
    overflow-x: auto;
    padding: 0 var(--gutter);
    scrollbar-width: none;
  }

  .docs-side::-webkit-scrollbar {
    display: none;
  }

  .docs-side,
  .docs-side ul {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .docs-side-title {
    margin: 0;
    padding: 0;
  }

  .docs-side-title a,
  .docs-side li a {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 99px;
    background: rgb(255 255 255 / 0.08);
    color: var(--soft);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
  }
}

/* Small screens */

@media (max-width: 900px) {
  .columns,
  .panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .columns-reverse .columns-text {
    order: 0;
  }

  .bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .tile,
  .tile-wide {
    grid-column: auto;
    height: clamp(440px, 104vw, 560px);
  }

  .tile-visual-ipad .ipad {
    width: 132%;
  }

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

  .relay {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .relay {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 20px;
  }
}

@media (max-width: 560px) {
  .relay {
    grid-template-columns: minmax(0, 1fr);
  }

  .highlights-head {
    align-items: start;
  }

  .card,
  .tile {
    border-radius: 24px;
  }

  .way figcaption {
    min-height: 8.6em;
  }

  .install {
    padding-left: 16px;
  }

  .install-code,
  .hero .install-code,
  .connect-primary .install-code {
    padding-block: 8px;
    font-size: 0.8125rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

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

  .install .copy {
    padding: 0 12px;
  }

  .pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .pager-next {
    text-align: left;
  }
}

/* Motion. Reveals follow the scroll position, so they need no script. */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-text linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }

    .reveal-device {
      animation: reveal-device linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 34%;
    }

    .hero-stage {
      animation: hero-leave linear both;
      animation-timeline: scroll(root);
      animation-range: 0 80vh;
    }
  }
}

@keyframes reveal-text {
  from {
    opacity: 0;
    translate: 0 28px;
  }
}

@keyframes reveal-device {
  from {
    opacity: 0.2;
    scale: 0.92;
  }
}

@keyframes hero-leave {
  to {
    opacity: 0.35;
    translate: 0 -6%;
    scale: 1.04;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}