/* Wrimote website
   System fonts only. No web fonts, no third-party requests, no cookies.
   Mobile first. Breakpoints: 734px (tablet) and 1068px (desktop). */

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;

  /* Brand. --accent is the app's blue, used for glows and art.
     --button is a slightly deeper blue so white text meets WCAG AA (4.9:1). */
  --accent: #5b7cff;
  --button: #3f63f2;
  --button-hover: #3657e0;

  /* Light theme */
  --bg: #fbfbfd;
  --bg-alt: #ffffff;
  --bg-soft: #f5f5f7;
  --tile: #f5f5f7;
  --tile-soft: #ffffff;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --link: #3657e0;
  --eyebrow: #3657e0;
  --icon: #3657e0;
  --hairline: rgba(0, 0, 0, 0.12);
  --chip: rgba(0, 0, 0, 0.05);
  --nav-bg: rgba(251, 251, 253, 0.72);
  --nav-solid: #fbfbfd;
  --footer-bg: #f5f5f7;
  --footer-text: #6e6e73;
  --footer-strong: #424245;
  --footer-rule: #d2d2d7;
  --glow: rgba(91, 124, 255, 0.36);
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.28);

  /* Layout */
  --gutter: clamp(20px, 5vw, 48px);
  --text-max: 980px;
  --wide-max: 1120px;
  --section-pad: clamp(80px, 12vw, 160px);
  --nav-h: 48px;

  /* Shape. Circular fallbacks; squircle versions are at the end of this file. */
  --r-tile: 28px;
  --r-card: 32px;
  --r-pill: 980px;

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e10;
    --bg-alt: #141416;
    --bg-soft: #1b1b1d;
    --tile: #1f1f21;
    --tile-soft: #2a2a2d;
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --link: #7b93ff;
    --eyebrow: #7b93ff;
    --icon: #7b93ff;
    --hairline: rgba(255, 255, 255, 0.14);
    --chip: rgba(255, 255, 255, 0.08);
    --nav-bg: rgba(22, 22, 23, 0.72);
    --nav-solid: #161617;
    --footer-bg: #1b1b1d;
    --footer-text: #a1a1a6;
    --footer-strong: #d2d2d7;
    --footer-rule: #424245;
    --glow: rgba(91, 124, 255, 0.34);
    --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
  }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--footer-bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

picture {
  display: block;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

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

[id] {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

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

p {
  text-wrap: pretty;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--button);
  color: #fff;
  font-size: 15px;
}

.skip:focus {
  top: 8px;
  text-decoration: none;
}

/* ---------- Navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--nav-solid);
  border-bottom: 1px solid var(--hairline);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav {
    background: var(--nav-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1024px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.nav-brand:hover {
  text-decoration: none;
}

.nav-brand img {
  width: 26px;
  height: 26px;
}

.nav-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-links {
  display: none;
  gap: 28px;
  margin: 0 12px 0 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  color: var(--text);
  opacity: 0.8;
  font-size: 13px;
  letter-spacing: -0.005em;
  transition: opacity 0.25s var(--ease);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  opacity: 1;
  text-decoration: none;
}

/* Phones: the links fold into a details menu, no JavaScript needed. */
.nav-menu {
  display: block;
}

.nav-menu > summary {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: -10px;
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.nav-menu > summary::-webkit-details-marker {
  display: none;
}

.nav-bars {
  position: relative;
  width: 18px;
  height: 10px;
}

.nav-bars::before,
.nav-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}

.nav-bars::before {
  top: 1px;
}

.nav-bars::after {
  bottom: 1px;
}

.nav-menu[open] .nav-bars::before {
  transform: translateY(3.25px) rotate(45deg);
}

.nav-menu[open] .nav-bars::after {
  transform: translateY(-3.25px) rotate(-45deg);
}

.nav-menu ul {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 12px var(--gutter) 28px;
  list-style: none;
  background: var(--nav-solid);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}

.nav-menu li a {
  display: block;
  padding: 10px 0;
  color: var(--text);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.nav-menu li a[aria-current="page"] {
  color: var(--link);
}

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

  .nav-menu {
    display: none;
  }
}

/* ---------- Buttons and links ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  background: var(--button);
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.button:hover {
  background: var(--button-hover);
  text-decoration: none;
}

.button:active {
  transform: scale(0.97);
}

.button--sm {
  min-height: 28px;
  padding: 4px 12px;
  font-size: 13px;
}

.more {
  color: var(--link);
  font-size: inherit;
}

.more::after {
  content: "\00a0\203A";
  content: "\00a0\203A" / "";
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

.more:hover::after {
  transform: translateX(3px);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--chip);
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--chip);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: middle;
}

/* ---------- Sections ---------- */

.section {
  --section-bg: var(--bg);
  --tile-bg: var(--tile);
  position: relative;
  padding: var(--section-pad) var(--gutter);
  background: var(--section-bg);
  color: var(--text);
  overflow-x: clip;
}

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

.section--soft {
  --section-bg: var(--bg-soft);
  --tile-bg: var(--tile-soft);
}

/* Black sections stay black in both themes. */
.section--dark {
  --section-bg: #000;
  --tile-bg: #161617;
  --text: #f5f5f7;
  --text-2: #86868b;
  --link: #7b93ff;
  --eyebrow: #7b93ff;
  --icon: #7b93ff;
  --hairline: rgba(255, 255, 255, 0.14);
  --chip: rgba(255, 255, 255, 0.1);
  color-scheme: dark;
}

/* One idea per screen. Vertical spacing follows the screen's height, not its
   width, so a headline and its visual fit on a laptop screen. */
.section--full {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(56px, 9vh, 120px);
  padding-block: clamp(56px, 9svh, 120px);
}

.section--full .section-head {
  margin-bottom: clamp(28px, 5vh, 64px);
  margin-bottom: clamp(28px, 5svh, 64px);
}

/* Flex children with auto margins would shrink to their content; keep them
   full width so max-width and centring work as they do in normal flow. */
.section--full > *,
.hero > * {
  width: 100%;
}

.container {
  width: 100%;
  max-width: var(--text-max);
  margin: 0 auto;
}

.container--wide {
  max-width: var(--wide-max);
}

.section-head {
  max-width: var(--text-max);
  margin: 0 auto clamp(48px, 7vw, 80px);
  text-align: center;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--eyebrow);
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.headline {
  margin: 0;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.lede {
  max-width: 34em;
  margin: 20px auto 0;
  color: var(--text-2);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* ---------- Watch ----------
   Apple's own picture of Apple Watch Series 11 (46 mm, Space Gray aluminium,
   black Sport Band), from its product bezels, with the app's screen in it.
   scripts/watch-device-image.swift makes each one. Apple's marketing
   guidelines say to show it as is: nothing added on it (no shadow, reflection
   or highlight), nothing cropped or covering it, and the watch itself never
   moves. Only the screen in it changes, and only to show the app as it
   looks when it runs. The watch itself, bands included, fills 849 of the
   picture's 880 rows, so at least 134px wide keeps it over Apple's 200px
   minimum on screen.
   --watch-w is the whole picture's width, bands included, at most 280px so
   the 560px picture stays sharp. */

.watch {
  --watch-w: 280px;
  display: grid;
  width: var(--watch-w);
  max-width: 100%;
  margin-inline: auto;
}

.watch > img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
}

/* ---------- Hero ---------- */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  padding-top: clamp(32px, 5vh, 64px);
  padding-top: clamp(32px, 5svh, 64px);
  padding-bottom: clamp(50px, 5vh, 56px);
  padding-bottom: clamp(50px, 5svh, 56px);
  text-align: center;
}

.hero-title {
  max-width: 11em;
  margin: 0 auto;
  font-size: clamp(44px, 7.5vw, 96px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.hero .lede {
  max-width: 32em;
  font-size: clamp(19px, 2.4vw, 28px);
  line-height: 1.3;
}

/* The Digital Crown, the reason Wrimote exists, on its own line in white. */
.lede-crown {
  display: block;
  color: var(--text);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 32px;
  margin-top: 32px;
  font-size: clamp(17px, 1.6vw, 19px);
}

/* Phones: the screen, then the watch below its lower left, a little over
   it. Nothing covers Apple's picture of the watch. */
.hero-stage {
  position: relative;
  display: grid;
  grid-template-areas: "screen" "watch";
  width: 100%;
  max-width: 560px;
  margin: clamp(28px, 4vh, 48px) auto 0;
  margin: clamp(28px, 4svh, 48px) auto 0;
}

.hero-glow,
.scene-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), rgba(91, 124, 255, 0) 100%);
  pointer-events: none;
}

.hero-glow {
  inset: -18% -10% -14% -4%;
}

.hero-screen {
  grid-area: screen;
  z-index: 1;
}

.hero-watch {
  --watch-w: max(33%, 134px);
  grid-area: watch;
  z-index: 2;
  justify-self: start;
  margin: -22% 0 0 2%;
}

/* Wider screens, and phones on their side: side by side, standing on the
   same line, with the watch's "Digital Crown" tag between them. The stage
   is capped by the window's height, so the whole hero fits on a laptop's
   screen. */
@media (min-width: 734px), (min-width: 560px) and (max-height: 500px) {
  .hero-stage {
    grid-template-areas: "stage";
    /* The screen is 0.44 times as tall as the stage is wide. */
    max-width: min(960px, max(520px, calc((100vh - 496px) * 2.28)));
    max-width: min(960px, max(520px, calc((100svh - 496px) * 2.28)));
  }

  .hero-screen,
  .hero-watch {
    grid-area: stage;
    align-self: end;
  }

  /* Its bottom on the band's: the picture's last 16 of 880 rows are clear. */
  .hero-screen {
    width: 70%;
    margin-bottom: 0.71%;
    justify-self: end;
  }

  .hero-watch {
    --watch-w: max(25%, 134px);
    margin: 0 0 0 1%;
  }
}

/* Pauses the demo, and plays it again. Shown by site.js. It sits under
   the screen's lower right corner, in the hero's bottom padding. */
.demo-toggle {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: -46px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--chip);
  color: var(--text-2);
  cursor: pointer;
}

.demo-toggle:hover {
  color: var(--text);
}

.demo-toggle:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.demo-toggle[hidden] {
  display: none;
}

.demo-toggle svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.demo-toggle .demo-play,
.demo-paused .demo-toggle .demo-pause {
  display: none;
}

.demo-paused .demo-toggle .demo-play {
  display: block;
}

.js .hero.demo-paused :is(.hero-screen *, .watch-touch *, .crown-tag, .crown-tag *),
.js .hero.demo-away :is(.hero-screen *, .watch-touch *, .crown-tag, .crown-tag *) {
  animation-play-state: paused;
}

/* ---------- Demo screen ----------
   A computer's screen alone: no computer is drawn round it, and nothing on
   it is only on a Mac (Apple's guidelines). Everything in it is sized in
   cqw, a hundredth of the screen's width. */

.hero-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 1.6% / 2.56%;
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow);
  container-type: inline-size;
  color: #fff;
  letter-spacing: 0;
  text-align: left;
}

.hero-screen p {
  margin: 0;
}

/* The photos on the screen were made with ChatGPT for this page. */
.s-desk {
  position: absolute;
  inset: 0;
  background: #1d2a4a url("/assets/feed/wallpaper.webp") center / cover;
  font-size: 1.2cqw;
  line-height: 1.25;
}

/* The window leaves the screen's left side to the wallpaper, where the
   "Digital Crown" tag lands. */
.s-win {
  position: absolute;
  inset: 4.6cqw 7cqw 3.4cqw 27cqw;
  overflow: hidden;
  border-radius: 1.3cqw;
  background: #141416;
  box-shadow: 0 0 0 0.08cqw rgba(255, 255, 255, 0.12), 0 2.4cqw 5cqw rgba(0, 0, 0, 0.55);
}

/* The window keeps its place below the top, where the pointer's path
   expects it. */
.s-win-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.2cqw;
  padding: 0 1.6cqw 0 2cqw;
  background: #1c1c1f;
  box-shadow: 0 0.08cqw 0 rgba(255, 255, 255, 0.08);
  font-size: 1.3cqw;
  font-weight: 700;
}

.s-win-body {
  position: absolute;
  inset: 4.2cqw 0 0;
  overflow: hidden;
}

.s-icon {
  width: 2.1cqw;
  height: 2.1cqw;
  fill: none;
  stroke: #f2f2f4;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.s-avatar {
  display: block;
  flex: none;
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 50%;
  background: #3a3a3f center / cover;
}

.s-av--you { background-image: url("/assets/feed/avatar-you.webp"); }
.s-av--mara { background-image: url("/assets/feed/avatar-mara.webp"); }
.s-av--kai { background-image: url("/assets/feed/avatar-kai.webp"); }
.s-av--lune { background-image: url("/assets/feed/avatar-lune.webp"); }
.s-av--theo { background-image: url("/assets/feed/avatar-theo.webp"); }
.s-av--ivy { background-image: url("/assets/feed/avatar-ivy.webp"); }
.s-av--noa { background-image: url("/assets/feed/avatar-noa.webp"); }
.s-av--ben { background-image: url("/assets/feed/avatar-ben.webp"); }

/* In the title bar, so the window's left edge is the feed's. */
.s-nav {
  display: flex;
  align-items: center;
  gap: 1.9cqw;
}

.s-nav .s-icon {
  width: 1.8cqw;
  height: 1.8cqw;
}

.s-nav .s-avatar {
  width: 2cqw;
  height: 2cqw;
}

/* The geometry below is exact, because the pointer has to land on the
   second post's heart: after the feed scrolls up 57.3cqw, that heart's
   centre is 32.05cqw from the screen's left (5.05cqw into the window) and
   41.5cqw below the title bar. Each post is 48.4cqw from the top of one to
   the next. */
.s-feed {
  position: absolute;
  top: 0;
  left: 4cqw;
  width: 34cqw;
  padding-top: 2cqw;
  translate: 0 -57.3cqw;
}

.s-stories {
  display: flex;
  gap: 1.7cqw;
  height: 6.4cqw;
  margin-bottom: 2cqw;
}

.s-story {
  display: grid;
  justify-items: center;
  gap: 0.5cqw;
  color: #c7c7cc;
  font-size: 0.95cqw;
}

.s-story .s-avatar {
  width: 4.2cqw;
  height: 4.2cqw;
  box-shadow: 0 0 0 0.25cqw #141416, 0 0 0 0.45cqw #5b7cff;
}

.s-post {
  height: 45.4cqw;
  margin-bottom: 3cqw;
}

.s-post-head {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  height: 4cqw;
  font-size: 1.1cqw;
}

.s-dim {
  color: #8e8e93;
}

.s-more {
  margin-left: auto;
  color: #c7c7cc;
  letter-spacing: 0.1em;
}

.s-photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: 0.6cqw;
}

.s-actions {
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  height: 4cqw;
}

.s-save {
  margin-left: auto;
}

.s-like {
  position: relative;
  display: grid;
}

.s-like > svg {
  grid-area: 1 / 1;
}

.s-liked {
  fill: #ff3b5c;
  stroke: #ff3b5c;
}

/* The like's big heart over the photo. */
.s-pop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9cqw;
  margin: -4.5cqw 0 0 -4.5cqw;
  fill: #fff;
  filter: drop-shadow(0 0.3cqw 0.8cqw rgba(0, 0, 0, 0.3));
  opacity: 0;
}

.hero-screen .s-likes,
.hero-screen .s-caption {
  height: 1.7cqw;
  font-size: 1.1cqw;
  line-height: 1.7cqw;
}

.s-likes {
  display: grid;
  font-weight: 700;
}

.s-count {
  grid-area: 1 / 1;
}

.s-pick .s-count:not(.s-count--new) {
  opacity: 0;
}

.s-caption {
  overflow: hidden;
  color: #e5e5ea;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.s-suggest {
  position: absolute;
  top: 3cqw;
  left: 43cqw;
  display: grid;
  gap: 1.3cqw;
  width: 19cqw;
  font-size: 1.05cqw;
}

.s-suggest-head {
  color: #8e8e93;
  font-weight: 600;
}

.s-suggest-row {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
}

.s-follow {
  margin-left: auto;
  color: #6f9bff;
  font-weight: 700;
}

/* The pointer. Each of these two boxes is the size of the screen, so a
   percentage translate is a share of the screen's width or height; moving
   across and down on different curves bends its path. */
.s-pointer-x,
.s-pointer-y {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.s-pointer-x {
  translate: -16.95% 0;
}

.s-pointer-y {
  translate: 0 27.7%;
}

.s-pointer-at {
  position: absolute;
  top: 40%;
  left: 52%;
}

.s-pointer {
  display: block;
  width: 2.6cqw;
  fill: #111;
  stroke: #fff;
  stroke-width: 1.3;
  stroke-linejoin: round;
  filter: drop-shadow(0 0.15cqw 0.3cqw rgba(0, 0, 0, 0.45));
  transform-origin: 0 0;
}

.s-click {
  position: absolute;
  top: -3.2cqw;
  left: -3.2cqw;
  width: 6.4cqw;
  height: 6.4cqw;
  border: 0.4cqw solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 0.15cqw rgba(0, 0, 0, 0.35), inset 0 0 0 0.15cqw rgba(0, 0, 0, 0.35);
  opacity: 0;
}

/* Phones: the watch stands over the screen's lower left, so the window and
   feed move right and the pointer starts further right, keeping the same
   path. The window stops higher, clear of the tag at the screen's bottom
   edge. */
@media (max-width: 559px), (max-width: 733px) and (min-height: 501px) {
  .s-win {
    right: 4cqw;
    bottom: 6cqw;
    left: 40cqw;
  }

  .s-feed {
    left: 11cqw;
  }

  .s-suggest {
    display: none;
  }

  .s-pointer-at {
    left: 72%;
  }

  .s-pointer {
    width: 4cqw;
  }
}

/* The posts' photos, each on its main colour while it loads. */
.s-art {
  background: center / cover;
}

.s-art--tomatoes { background-color: #d9c9b4; background-image: url("/assets/feed/post-tomatoes.webp"); }
.s-art--aurora { background-color: #0d1a1c; background-image: url("/assets/feed/post-aurora.webp"); }
.s-art--greenhouse { background-color: #5f7a4a; background-image: url("/assets/feed/post-greenhouse.webp"); }
.s-art--saturn { background-color: #000; background-image: url("/assets/feed/post-saturn.webp"); }

/* ---------- Watch touch ----------
   The touch as Wrimote's trackpad screen shows it (TrackpadView.swift): a
   plain white circle, 34pt across, where the finger is, with the hints
   hidden from the first touch until 2.5s after the last lift, when they
   fade back in over 0.5s. It is drawn only inside the screen's
   opening (416 x 496 at 72, 192 in the 560 x 880 picture), so it is the
   screen's content, never over the case or bands. The app shows nothing
   when the Crown turns, so that is shown by a tag beside the watch. */

.hero-watch {
  position: relative;
}

.watch-touch {
  position: absolute;
  z-index: 1;
  top: 21.818%;
  left: 12.857%;
  width: 74.286%;
  height: 56.364%;
  overflow: hidden;
  border-radius: 21% / 17.6%;
  pointer-events: none;
}

/* The screen's own black, over the hints (7.9 to 91.4% across, 34.7 to
   64.7% down) while a finger is down. */
.t-hush {
  position: absolute;
  top: 33%;
  left: 6%;
  width: 88%;
  height: 34%;
  background: #000;
  opacity: 0;
}

.t-x,
.t-y {
  position: absolute;
  inset: 0;
}

.t-at {
  position: absolute;
  top: 36%;
  left: 60%;
  width: 16.35%;
  aspect-ratio: 1;
  margin: -8.175% 0 0 -8.175%;
}

.t-finger {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  opacity: 0;
}

/* Beside the watch, never on it: it points at the Digital Crown, 38% down
   the picture at its right edge. It stays on, so the Crown is never missed,
   and turns blue while the Crown turns. */
.crown-tag {
  position: absolute;
  z-index: 3;
  top: 38%;
  left: calc(100% + 10px);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 9px;
  border-radius: var(--r-pill);
  background: var(--tile-bg);
  box-shadow: 0 0 0 1px var(--hairline), 0 8px 20px -8px rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  width: max-content;
  translate: 0 -50%;
}

/* Its point, towards the Crown. */
.crown-tag::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  background: inherit;
  rotate: 45deg;
}

/* Turning, as the Crown does. */
.crown-turn {
  flex: none;
  width: 17px;
  height: 17px;
  transform-box: fill-box;
  transform-origin: center;
  fill: none;
  stroke: var(--link);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Short windows make a narrower stage, so the tag is a little smaller there
   to stay on the wallpaper, clear of the screen's window. It stays 10px from
   the watch, so its point never reaches the Crown. */
@media (min-width: 734px) and (max-height: 760px), (min-width: 560px) and (max-height: 500px) {
  .crown-tag {
    gap: 6px;
    padding: 5px 10px 5px 8px;
    font-size: 12px;
  }

  .crown-turn {
    width: 15px;
    height: 15px;
  }
}

/* Under about 700px tall, and on phones on their side, the stage is at its
   smallest (520px) and the watch at its 134px minimum, so the screen gives a
   little width too. */
@media (min-width: 734px) and (max-height: 700px), (min-width: 560px) and (max-height: 500px) {
  .hero-screen {
    width: 68%;
  }

  .crown-tag {
    gap: 5px;
    padding: 4px 8px 4px 7px;
    font-size: 11px;
  }

  .crown-turn {
    width: 13px;
    height: 13px;
  }
}

/* Browsers without container query units can't size the screen's contents,
   so they show the watch on its own. */
@supports not (width: 1cqw) {
  .hero-screen,
  .crown-tag,
  .watch-touch,
  .demo-toggle {
    display: none;
  }

  .hero-watch {
    justify-self: center;
    margin: 0;
  }
}

/* ---------- Hero demo ----------
   A 14 s loop, the watch and the computer in step. The Crown scrolls the feed
   to the next post (0.6 to 2.8 s); a finger drags on the watch and the
   pointer glides to that post's heart (3.1 to 5.3 s); a tap likes it (5.8 s);
   the Crown scrolls on past two more posts (7.8 to 10.1 s); then it fades
   and starts again.
   With reduced motion, or without the script, it holds still on the liked
   post. */

@media (prefers-reduced-motion: no-preference) {
  .hero {
    --demo: 14s;
  }

  /* Only with the script, which shows the pause button. */
  .js .s-feed { animation: s-scroll var(--demo) infinite both; }
  .js .s-pointer-x { animation: s-pointer-x var(--demo) infinite both; }
  .js .s-pointer-y { animation: s-pointer-y var(--demo) infinite both; }
  .js .s-pointer-at { animation: s-pointer-fade var(--demo) infinite both; }
  .js .s-pointer { animation: s-press var(--demo) infinite both; }
  .js .s-click { animation: s-click var(--demo) infinite both; }
  .js .s-liked { animation: s-liked var(--demo) infinite both; }
  .js .s-pop { animation: s-pop var(--demo) infinite both; }
  .js .s-pick .s-count { animation: s-count-old var(--demo) infinite both; }
  .js .s-pick .s-count--new { animation: s-count-new var(--demo) infinite both; }
  .js .t-x { animation: t-x var(--demo) infinite both; }
  .js .t-y { animation: t-y var(--demo) infinite both; }
  .js .t-finger { animation: t-down var(--demo) infinite both; }
  .js .t-hush { animation: t-hush var(--demo) infinite both; }
  .js .crown-tag { animation: crown-tag var(--demo) infinite both; }
  .js .crown-turn { animation: crown-turn var(--demo) infinite both, crown-ink var(--demo) infinite both; }
}

@keyframes s-scroll {
  0%, 4% { translate: 0 0; opacity: 1; animation-timing-function: cubic-bezier(0.3, 0.55, 0.15, 1); }
  20%, 56% { translate: 0 -57.3cqw; opacity: 1; animation-timing-function: cubic-bezier(0.3, 0.55, 0.15, 1); }
  72%, 88% { translate: 0 -154.1cqw; opacity: 1; }
  92% { translate: 0 -154.1cqw; opacity: 0; }
  92.1% { translate: 0 0; opacity: 0; }
  97%, 100% { translate: 0 0; opacity: 1; }
}

/* To the heart, then after the like a short glide up onto the photo, so
   the new count shows. */
@keyframes s-pointer-x {
  0%, 22% { translate: 0 0; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  38%, 46% { translate: -19.95% 0; animation-timing-function: ease-in-out; }
  50%, 92% { translate: -16.95% 0; }
  92.1%, 100% { translate: 0 0; }
}

@keyframes s-pointer-y {
  0%, 22% { translate: 0 0; animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  38%, 46% { translate: 0 40.48%; animation-timing-function: ease-in-out; }
  50%, 92% { translate: 0 27.7%; }
  92.1%, 100% { translate: 0 0; }
}

@keyframes s-pointer-fade {
  0%, 88% { opacity: 1; }
  91%, 94% { opacity: 0; }
  98%, 100% { opacity: 1; }
}

@keyframes s-press {
  0%, 40.6% { scale: 1; }
  41.6% { scale: 0.8; }
  43.4%, 100% { scale: 1; }
}

@keyframes s-click {
  0%, 41% { opacity: 0; scale: 0.2; }
  41.8% { opacity: 1; scale: 0.45; }
  47.5%, 100% { opacity: 0; scale: 1.6; }
}

@keyframes s-liked {
  0%, 41.4% { opacity: 0; scale: 0.5; }
  42.4% { opacity: 1; scale: 1.3; }
  44.5%, 92% { opacity: 1; scale: 1; }
  92.1%, 100% { opacity: 0; scale: 0.5; }
}

@keyframes s-pop {
  0%, 41.6% { opacity: 0; scale: 0.3; }
  43.2% { opacity: 1; scale: 1.15; }
  45% { opacity: 1; scale: 1; }
  49% { opacity: 1; scale: 1; }
  52%, 100% { opacity: 0; scale: 1.05; }
}

@keyframes s-count-old {
  0%, 41.8% { opacity: 1; }
  42.4%, 92% { opacity: 0; }
  92.1%, 100% { opacity: 1; }
}

@keyframes s-count-new {
  0%, 41.8% { opacity: 0; }
  42.4%, 92% { opacity: 1; }
  92.1%, 100% { opacity: 0; }
}

/* The fingertip follows the pointer's path and timing on the watch: it
   lands, drags, lifts, then taps. Its boxes are the screen's size too. */
@keyframes t-x {
  0%, 22% { translate: 0 0; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  38%, 46% { translate: -22% 0; animation-timing-function: ease-in-out; }
  50%, 100% { translate: -18.69% 0; }
}

@keyframes t-y {
  0%, 22% { translate: 0 0; animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  38%, 46% { translate: 0 28%; animation-timing-function: ease-in-out; }
  50%, 100% { translate: 0 19.16%; }
}

/* A finger on the watch: down for the drag, up, down for the tap, then
   down again for the short glide. The app shows and hides its circle at
   once, so these switch quickly. */
@keyframes t-down {
  0%, 21% { opacity: 0; }
  21.4%, 38.8% { opacity: 1; }
  39.2%, 40.6% { opacity: 0; }
  41%, 42.8% { opacity: 1; }
  43.2%, 45.6% { opacity: 0; }
  46%, 50% { opacity: 1; }
  50.4%, 100% { opacity: 0; }
}

/* The hints, as the app hides them: gone at the first touch, back 2.5s
   after the last lift (50.4%, plus 17.9% of 14s), fading in over 0.5s. */
@keyframes t-hush {
  0%, 21% { opacity: 0; }
  21.4%, 68.3% { opacity: 1; animation-timing-function: ease-in; }
  71.9%, 100% { opacity: 0; }
}

/* Blue while the Crown scrolls, and fully blue just before each scroll, so
   the colour, the turn and the scroll start on the same frame. It never
   moves. */
@keyframes crown-tag {
  0%, 1.5% { background-color: #161617; color: #f5f5f7; }
  3.5%, 20% { background-color: #3f63f2; color: #fff; }
  23%, 53% { background-color: #161617; color: #f5f5f7; }
  55.5%, 72% { background-color: #3f63f2; color: #fff; }
  75%, 100% { background-color: #161617; color: #f5f5f7; }
}

/* Its arrow, blue on the dark tag and white on the blue one. */
@keyframes crown-ink {
  0%, 1.5% { stroke: #7b93ff; }
  3.5%, 20% { stroke: #fff; }
  23%, 53% { stroke: #7b93ff; }
  55.5%, 72% { stroke: #fff; }
  75%, 100% { stroke: #7b93ff; }
}

/* Turns with the feed: the same spans and curve as the scroll, once a post. */
@keyframes crown-turn {
  0%, 4% { rotate: 0deg; animation-timing-function: cubic-bezier(0.3, 0.55, 0.15, 1); }
  20%, 56% { rotate: 360deg; animation-timing-function: cubic-bezier(0.3, 0.55, 0.15, 1); }
  72%, 100% { rotate: 1080deg; }
}

/* ---------- Digital Crown: scroll it yourself ----------
   A computer's screen showing a long article, beside Apple's watch picture
   and a "Digital Crown" cue. Pinned (see "Motion"), the visitor's own
   scrolling glides the article and its scrollbar and turns the cue's arrow,
   all in step, as the Crown would: it stops when they stop and goes back
   when they scroll up. Otherwise it holds still a third of the way down the
   article. Like the hero's screen, no computer is drawn round it and
   nothing on it is only on a Mac. Everything in it is sized in --u, a
   hundredth of its width on wide screens, a little more on phones. Apple's
   watch picture never moves and nothing covers it. */

/* Phones and portrait tablets: the screen, then the watch below its lower
   left, over the wallpaper strip at the screen's foot, with the cue beside
   it. Capped by the window's height so it fits on one screen. */
.crown-stage {
  display: grid;
  width: 100%;
  max-width: min(560px, max(280px, calc((100vh - var(--nav-h) - 254px) / 1.07)));
  max-width: min(560px, max(280px, calc((100svh - var(--nav-h) - 254px) / 1.07)));
  margin-inline: auto;
}

.crown-screen {
  --u: 1.9cqw;
  /* The article's visible height: the window's, less its bar. */
  --body-h: 33.52cqw;
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 1.6% / 2.56%;
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow);
  container-type: inline-size;
  color: #fff;
  letter-spacing: 0;
  text-align: left;
}

.crown-screen p {
  margin: 0;
}

.r-desk {
  position: absolute;
  inset: 0;
  background: #1d2a4a url("/assets/feed/wallpaper.webp") center / cover;
  line-height: 1.25;
}

/* A flat dim, so the window and its photos lead. */
.r-desk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}

.r-win {
  position: absolute;
  z-index: 1;
  inset: 3cqw 3cqw 18cqw;
  overflow: hidden;
  border-radius: 1.6cqw;
  background: #141416;
  box-shadow: 0 0 0 0.08cqw rgba(255, 255, 255, 0.12), 0 2.4cqw 5cqw rgba(0, 0, 0, 0.55);
}

/* A title only: no window buttons and no menu bar. */
.r-bar {
  height: calc(var(--u) * 4.2);
  padding: 0 calc(var(--u) * 2);
  overflow: hidden;
  background: #1c1c1f;
  box-shadow: 0 0.08cqw 0 rgba(255, 255, 255, 0.08);
  font-size: calc(var(--u) * 1.3);
  font-weight: 700;
  line-height: calc(var(--u) * 4.2);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.r-body {
  position: absolute;
  inset: calc(var(--u) * 4.2) 0 0;
  overflow: hidden;
}

/* At rest, a third of the way down: the photo going up, the first lines
   showing. -100% plus the visible height is the whole way down. */
.r-page {
  display: grid;
  gap: calc(var(--u) * 1.6);
  width: calc(var(--u) * 44);
  margin: 0 auto;
  padding: calc(var(--u) * 3) 0 calc(var(--u) * 4);
  color: #c7c7cc;
  font-size: calc(var(--u) * 1.3);
  line-height: 1.6;
  translate: 0 calc((-100% + var(--body-h)) * 0.32);
}

.r-by {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  color: #fff;
  font-size: calc(var(--u) * 1.2);
}

.r-by .s-avatar {
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * 2.6);
}

.r-dim {
  color: #8e8e93;
}

.r-title {
  color: #fff;
  font-size: calc(var(--u) * 2.9);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.r-photo {
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--u) * 0.7);
}

.r-cap {
  margin-top: calc(var(--u) * -0.8);
  color: #8e8e93;
  font-size: calc(var(--u) * 1.1);
}

.r-more {
  margin-top: calc(var(--u) * 1.6);
  color: #fff;
  font-size: calc(var(--u) * 1.6);
  font-weight: 700;
}

.r-row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.9);
  overflow: hidden;
  font-size: calc(var(--u) * 1.2);
  white-space: nowrap;
}

.r-row b {
  color: #fff;
}

.r-pic {
  flex: none;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 0.6);
}

.r-row .s-avatar {
  width: calc(var(--u) * 2.2);
  height: calc(var(--u) * 2.2);
}

/* A plain overlay scrollbar, its thumb a third of the way down too. */
.r-track {
  position: absolute;
  top: calc(var(--u) * 0.8);
  right: calc(var(--u) * 0.6);
  bottom: calc(var(--u) * 0.8);
  width: calc(var(--u) * 0.5);
}

.r-thumb {
  display: block;
  height: 30%;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.4);
  translate: 0 74.67%;
}

/* The pointer rests on the article while it scrolls underneath, as it does
   when you scroll. */
.r-pointer {
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 62%;
  width: 4cqw;
  fill: #111;
  stroke: #fff;
  stroke-width: 1.3;
  stroke-linejoin: round;
  filter: drop-shadow(0 0.15cqw 0.3cqw rgba(0, 0, 0, 0.45));
}

.crown-watch {
  --watch-w: max(36%, 134px);
  position: relative;
  z-index: 2;
  justify-self: start;
  margin: -16% 0 0 3%;
}

/* Beside the watch, never on it: the pill's middle is level with the
   Digital Crown, 38% down the picture at its right edge. */
.crown-cue {
  --pill-h: 38px;
  position: absolute;
  z-index: 3;
  top: 38%;
  left: calc(100% + 12px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  translate: 0 calc(var(--pill-h) / -2);
}

.crown-cue-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--pill-h);
  padding: 0 14px 0 10px;
  border-radius: var(--r-pill);
  background: #161617;
  box-shadow: 0 0 0 1px var(--hairline);
  color: #f5f5f7;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Its point, towards the Crown. */
.crown-cue-pill::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: inherit;
  box-shadow: -1px 1px 0 0 var(--hairline);
  rotate: 45deg;
}

.crown-cue-turn {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #7b93ff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* "Scroll to turn it" until the visitor starts scrolling, then "Turn to
   scroll". At rest only the second shows. */
.crown-cue-hints {
  display: grid;
  margin: 8px 0 0 10px;
  color: #86868b;
  font-size: 13px;
  line-height: 1.2;
}

.crown-cue-hint {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.crown-cue-hint--live {
  opacity: 0;
}

@media (max-width: 733px) {
  .crown-head .lede {
    margin-top: 12px;
    font-size: 17px;
  }
}

/* Laptops and landscape tablets: the screen, then the watch standing on the
   same line, then the cue in the space on the right. Capped by the window's
   height so the whole frame fits on one screen. */
@media (min-width: 734px) and (min-aspect-ratio: 1/1) {
  .crown-stage {
    grid-template-columns: 50% 21%;
    column-gap: 3%;
    align-items: end;
    max-width: min(1080px, max(640px, calc((100vh - 450px) * 2.85)));
    max-width: min(1080px, max(640px, calc((100svh - 450px) * 2.85)));
  }

  /* Its bottom on the band's: the picture's last 16 of 880 rows are clear.
     Grid items' margins are a share of their own column. */
  .crown-screen {
    --u: 1cqw;
    --body-h: 50.3cqw;
    margin-bottom: 1.2%;
  }

  .r-win {
    inset: 4cqw 7cqw;
    border-radius: 1.3cqw;
  }

  .r-pointer {
    top: 40%;
    left: 55%;
    width: 2.6cqw;
  }

  .crown-watch {
    --watch-w: 100%;
    justify-self: stretch;
    margin: 0;
  }
}

@media (min-width: 1068px) and (min-aspect-ratio: 1/1) {
  .crown-stage {
    grid-template-columns: 54% 22%;
  }

  .crown-screen {
    margin-bottom: 1.17%;
  }

  .crown-cue {
    --pill-h: 46px;
    left: calc(100% + 14px);
  }

  .crown-cue-pill {
    gap: 10px;
    padding: 0 18px 0 12px;
    font-size: 17px;
  }

  .crown-cue-turn {
    width: 26px;
    height: 26px;
  }

  .crown-cue-hints {
    margin-left: 12px;
    font-size: 14px;
  }
}

/* The narrowest phones: the watch at its 134px minimum against the left
   edge, and a smaller cue, so the cue stays on screen. */
@media (max-width: 359px) {
  .crown-watch {
    margin-left: 0;
  }

  .crown-cue {
    --pill-h: 30px;
    left: calc(100% + 10px);
  }

  .crown-cue-pill {
    gap: 6px;
    padding: 0 10px 0 8px;
    font-size: 13px;
  }

  .crown-cue-turn {
    width: 17px;
    height: 17px;
  }

  .crown-cue-hints {
    margin-left: 8px;
    font-size: 12px;
  }
}

/* Browsers without container query units can't size the screen's contents,
   so they show the watch on its own, centred. */
@supports not (width: 1cqw) {
  .crown-stage {
    grid-template-columns: none;
  }

  .crown-screen,
  .crown-cue {
    display: none;
  }

  .crown-watch {
    --watch-w: 280px;
    justify-self: center;
    margin: 0;
  }
}

/* ---------- How it works: pinned scene ---------- */

.scene-head {
  margin-bottom: clamp(56px, 8vw, 96px);
}

.scene-grid {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
}

/* Static layout: used without JavaScript and with reduced motion.
   Each step carries its own watch. */
.scene-stage {
  display: none;
}

.steps {
  display: grid;
  gap: clamp(64px, 9vw, 112px);
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  justify-items: center;
  gap: 32px;
  text-align: center;
}

.step-figure {
  margin: 0;
}

/* Short enough to see whole on a landscape phone: the picture is 1.571 times as tall as wide. */
.step-figure .watch {
  --watch-w: clamp(160px, min(54vw, calc((100vh - var(--nav-h) - 32px) / 1.571)), 280px);
  --watch-w: clamp(160px, min(54vw, calc((100svh - var(--nav-h) - 32px) / 1.571)), 280px);
}

.step-copy {
  max-width: 30em;
}

.step-label {
  margin: 0 0 10px;
  color: var(--eyebrow);
  font-size: 17px;
  font-weight: 600;
}

.step-title {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
}

.step-text {
  margin: 14px 0 0;
  color: var(--text-2);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.4;
}

@media (min-width: 734px) {
  .step {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: clamp(40px, 6vw, 80px);
    text-align: left;
  }
}

/* Pinned layout: the watch stays in the middle of the screen while the steps
   scroll past, and its screen changes with each step. Needs motion allowed,
   JavaScript (which sets .js on <html>) and a screen tall enough to hold a
   watch and a step at once; short landscape phones keep the static steps. */
@media (prefers-reduced-motion: no-preference) and (min-height: 560px) {
  .js .scene {
    padding-bottom: 0;
  }

  .js .scene-head {
    margin-bottom: 0;
  }

  .js .scene-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 6vw, 96px);
  }

  .js .scene-stage {
    display: block;
    grid-column: 1;
    grid-row: 1;
  }

  /* Pinned below the nav bar, so the watch is centred in the visible area. */
  .js .scene-sticky {
    position: sticky;
    top: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - var(--nav-h));
    height: calc(100svh - var(--nav-h));
  }

  .js .scene-glow {
    inset: 18% -10%;
  }

  /* Never taller than the space under the nav bar: the picture, bands
     included, is 880 / 560 = 1.571 times as tall as it is wide. */
  .js .watch--scene {
    --watch-w: min(280px, calc((100vh - var(--nav-h) - 64px) / 1.571));
    --watch-w: min(280px, calc((100svh - var(--nav-h) - 64px) / 1.571));
    z-index: 1;
  }

  .js .steps {
    display: block;
    grid-column: 2;
    grid-row: 1;
    max-width: none;
  }

  .js .step {
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    text-align: left;
  }

  .js .step-figure {
    display: none;
  }

  /* Each step's picture fades in on top of the one before, so only the
     screen seems to change: the watch never moves or turns see-through. */
  .js .scene-screen {
    transition: opacity 0.6s var(--ease);
  }

  .js .scene-screen--2,
  .js .scene-screen--3 {
    opacity: 0;
  }

  .js .scene[data-active="2"] .scene-screen--2,
  .js .scene[data-active="3"] .scene-screen--2,
  .js .scene[data-active="3"] .scene-screen--3 {
    opacity: 1;
  }
}

/* Phones: the watch pins under the bar, bigger, and each step's words stop
   just below it until the next step pushes them up and away. site.js sets
   --stage-h to the pinned area's height so the words stop right under it. */
@media (prefers-reduced-motion: no-preference) and (max-width: 733px) and (min-height: 560px) {
  .js .scene-head {
    margin-bottom: clamp(24px, 6svh, 48px);
  }

  .js .scene-grid {
    display: block;
  }

  /* Keep the glow inside the page gutter, so nothing pokes past the screen edge. */
  .js .scene-glow {
    inset: 12% 0;
  }

  .js .scene-stage {
    position: sticky;
    top: var(--nav-h);
    z-index: 2;
    background: var(--section-bg);
  }

  .js .scene-stage::after {
    content: "";
    position: absolute;
    left: calc(var(--gutter) * -1);
    right: calc(var(--gutter) * -1);
    top: 100%;
    height: 40px;
    background: linear-gradient(var(--section-bg), rgba(0, 0, 0, 0));
    pointer-events: none;
  }

  .js .scene-sticky {
    position: static;
    height: auto;
    padding: 12px 0 4px;
  }

  /* As big as fits with room for a step's words below it. Below 360px wide
     the words wrap onto more lines, so the watch stays a little smaller. */
  .js .watch--scene {
    --watch-w: min(62vw, 34vh, 260px);
    --watch-w: min(62vw, 34svh, 260px);
  }

  @media (max-width: 359px) {
    .js .watch--scene {
      --watch-w: min(62vw, 30vh, 260px);
      --watch-w: min(62vw, 30svh, 260px);
    }
  }

  .js .steps {
    display: block;
  }

  .js .step {
    display: block;
    min-height: 70vh;
    min-height: 70svh;
    text-align: center;
  }

  .js .step-copy {
    position: sticky;
    top: calc(var(--nav-h) + var(--stage-h, 340px));
    max-width: 22em;
    margin: 0 auto;
    padding-top: 20px;
  }
}

/* ---------- Bento tiles ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.tile {
  display: flex;
  flex-direction: column;
  min-height: 188px;
  padding: 24px 20px;
  border-radius: var(--r-tile);
  background: var(--tile-bg);
}

.tile--wide,
.tile--big {
  grid-column: span 2;
}

.tile-art {
  width: 44px;
  height: 44px;
  margin-bottom: auto;
  color: var(--icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tile-figure {
  margin: 0 0 auto;
  color: var(--icon);
  font-size: 48px;
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.03em;
}

.tile-title {
  margin: 24px 0 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.21;
  letter-spacing: -0.012em;
}

.tile-text {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.4;
}

.tile--big .tile-art {
  width: 88px;
  height: 88px;
  stroke-width: 2.4;
}

.tile--big .tile-art--trail {
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 8px auto auto;
  stroke-width: 6;
}

.trail {
  stroke-dasharray: 0.1 13;
  opacity: 0.55;
}

.tile--big .tile-title {
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.022em;
}

.tile--big .tile-text {
  font-size: clamp(17px, 1.7vw, 21px);
}

.signal-dots {
  display: flex;
  gap: 10px;
  margin: 0 0 auto;
  padding: 0;
}

.signal-dots span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.signal-dots span:nth-child(1) { background: #30d158; }
.signal-dots span:nth-child(2) { background: #ffd60a; }
.signal-dots span:nth-child(3) { background: #ff9f0a; }
.signal-dots span:nth-child(4) { background: #ff453a; }

@media (min-width: 734px) {
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .tile {
    min-height: 240px;
    padding: 32px;
  }

  .tile--big {
    grid-row: span 2;
  }

  .tile-title {
    font-size: 21px;
  }

  .tile-text {
    font-size: 17px;
  }
}

@media (min-width: 1068px) {
  .tile {
    padding: 40px;
  }
}

/* ---------- Direct Bluetooth diagram ---------- */

.diagram {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--r-card);
  background: var(--tile-bg);
  view-timeline: --diagram block;
}

.diagram-art {
  position: relative;
  color: var(--text);
}

.diagram-art svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.diagram-label {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -190%;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--chip);
  color: var(--text);
  font-size: clamp(12px, 1.6vw, 15px);
  font-weight: 600;
  white-space: nowrap;
}

.diagram-dots {
  stroke: var(--hairline);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 0 14;
}

.diagram-line {
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.diagram-glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.diagram-pointer {
  fill: var(--accent);
}

.facts {
  display: grid;
  gap: 28px;
  max-width: var(--text-max);
  margin: clamp(32px, 5vw, 48px) auto 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.fact-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.fact-text {
  max-width: 24em;
  margin: 6px auto 0;
  color: var(--text-2);
  font-size: 17px;
}

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

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

/* ---------- Security code ---------- */

.code {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  font-size: clamp(64px, 18vw, 180px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.code span {
  display: inline-block;
  background: linear-gradient(180deg, #ffffff 25%, #9fb0ff 75%, #5b7cff 115%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.code .code-gap {
  width: 0.32em;
}

.code-caption {
  margin: 20px auto 0;
  color: var(--text-2);
  font-size: 17px;
  text-align: center;
}

/* ---------- Mac and Windows ---------- */

/* No wider than half the screenshot's 840px, so it stays sharp on 2x screens. */
.shot {
  max-width: 420px;
  margin: 0 auto;
}

.shot img {
  width: 100%;
}

.platforms {
  display: grid;
  gap: 16px;
  max-width: 880px;
  margin: clamp(32px, 5vw, 56px) auto 0;
  padding: 0;
  list-style: none;
}

.platform {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 28px;
  border-radius: var(--r-tile);
  background: var(--tile-bg);
}

.platform-icon {
  width: 56px;
  height: 56px;
}

.platform-icon img {
  width: 56px;
  height: 56px;
}

.glyph-tile {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--chip);
  color: var(--icon);
}

.glyph-tile svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.platform-title {
  margin: 2px 0 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.platform-text {
  margin: 6px 0 0;
  color: var(--text-2);
}

@media (min-width: 734px) {
  .platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

/* Desktop: the pairing window beside the two platforms, so the section fits one screen. */
@media (min-width: 1068px) {
  .platforms-layout {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    max-width: 960px;
    margin: 0 auto;
  }

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

/* ---------- Price ---------- */

.price-card {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 64px) clamp(24px, 6vw, 64px);
  border-radius: var(--r-card);
  background: var(--tile-bg);
  text-align: center;
}

.price-card .watch {
  --watch-w: 168px;
  margin-bottom: 24px;
}

.price-name {
  margin: 0 0 12px;
  color: var(--eyebrow);
  font-size: 17px;
  font-weight: 600;
}

.price-big {
  margin: 0;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
}

.price-big + .price-big {
  color: var(--text-2);
}

.price-note {
  margin: 16px 0 0;
  color: var(--text-2);
}

.price-fine {
  max-width: 30em;
  margin: 24px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  color: var(--text-2);
  font-size: 14px;
}

/* Wider screens: the watch beside the price, so the card fits one screen. */
@media (min-width: 734px) {
  .price-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 56px);
    align-items: center;
    max-width: 840px;
    padding: clamp(36px, 5vh, 56px) clamp(36px, 5vw, 56px);
    padding: clamp(36px, 5svh, 56px) clamp(36px, 5vw, 56px);
    text-align: left;
  }

  .price-card .watch {
    --watch-w: 208px;
    grid-row: 1 / span 5;
    margin: 0;
  }

  .price-fine {
    margin: 16px 0 0;
    padding-top: 0;
    border-top: 0;
  }
}

/* ---------- Get it: requirements and downloads ---------- */

.get-photo {
  display: block;
  width: 100%;
  max-width: 880px;
  height: auto;
  margin: 0 auto 20px;
  border-radius: var(--r-card);
}

.get-list {
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border-radius: var(--r-card);
  background: var(--tile-bg);
  overflow: hidden;
}

.get-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px 20px;
  align-items: center;
  padding: 24px clamp(20px, 4vw, 32px);
}

.get-row + .get-row {
  border-top: 1px solid var(--hairline);
}

.get-row-icon,
.get-row-icon img {
  width: 56px;
  height: 56px;
}

.get-row-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.get-row-text {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.4;
}

.get-row-action {
  grid-column: 2;
  justify-self: start;
}

.get-row-action.status {
  white-space: normal;
}

@media (min-width: 734px) {
  .get-row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
  }

  .get-row-action {
    grid-column: 3;
    justify-self: end;
  }

  .get-row-action.status {
    white-space: nowrap;
  }
}

.get-note {
  max-width: 34em;
  margin: 28px auto 0;
  color: var(--text-2);
  font-size: 15px;
  text-align: center;
}

/* ---------- FAQ ---------- */

.faq {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--hairline);
}

.faq details {
  border-bottom: 1px solid var(--hairline);
}

.faq summary {
  position: relative;
  padding: 22px 44px 22px 0;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--text-2);
  transition: transform 0.3s var(--ease);
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: rotate(0deg);
}

.faq summary:focus-visible {
  outline-offset: -3px;
}

.faq details p {
  max-width: 36em;
  margin: -6px 0 24px;
  color: var(--text-2);
  font-size: 17px;
}

.faq-more {
  margin: 36px 0 0;
  font-size: clamp(17px, 1.6vw, 19px);
  text-align: center;
}

/* ---------- Long-form pages (support, privacy, 404) ---------- */

.page {
  padding: clamp(56px, 8vw, 104px) var(--gutter) var(--section-pad);
  background: var(--bg);
}

.page-head,
.prose {
  max-width: 720px;
  margin: 0 auto;
}

.page-head {
  margin-bottom: clamp(40px, 6vw, 64px);
}

.page-title {
  margin: 0;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.page-head .lede {
  margin-left: 0;
}

.page-meta {
  margin: 16px 0 0;
  color: var(--text-2);
  font-size: 15px;
}

.prose h2 {
  margin: 64px 0 14px;
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.prose h3 {
  margin: 32px 0 8px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.012em;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 16px;
}

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

.prose li {
  margin: 6px 0;
}

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

.prose strong {
  font-weight: 600;
}

.prose code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--chip);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

.prose .muted {
  color: var(--text-2);
}

.card {
  margin: 0 0 24px;
  padding: 24px 28px;
  border-radius: 24px;
  background: var(--tile);
}

.card > :last-child {
  margin-bottom: 0;
}

.card-title,
.prose .card-title {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.012em;
}

.contact-email {
  display: inline-block;
  margin-top: 4px;
  font-size: clamp(21px, 3vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.toc,
.prose .toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.prose .toc li {
  margin: 0;
}

.toc a {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--chip);
  color: var(--text);
  font-size: 14px;
}

.toc a:hover {
  text-decoration: none;
  background: var(--hairline);
}

.table-wrap {
  margin: 8px 0 24px;
}

.gestures-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}

.gestures-table th,
.gestures-table td {
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}

.gestures-table th {
  padding-top: 0;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
}

.gestures-table td:first-child {
  width: 50%;
  padding-right: 20px;
  font-weight: 600;
}

.not-found {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  text-align: center;
}

.not-found .page-head {
  margin-bottom: 32px;
}

.not-found .lede {
  margin-left: auto;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 20px var(--gutter) 28px;
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: 12px;
  line-height: 1.34;
}

.footer-inner {
  max-width: 980px;
  margin: 0 auto;
}

.site-footer p {
  margin: 0 0 8px;
}

.footer-note {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--footer-rule);
}

.site-footer a {
  color: var(--footer-strong);
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.footer-nav li {
  margin: 2px 0;
}

.footer-nav li + li {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--footer-rule);
}

.footer-nav a {
  display: inline-block;
  padding: 2px 0;
}

/* ---------- Motion ----------
   Everything above is fully visible and static. Motion below only runs when
   the visitor allows it. Scroll-driven animations tie motion to the scroll
   position; browsers without them get a small IntersectionObserver reveal
   (see site.js). */

@keyframes rise {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes tile-in {
  from { opacity: 0; translate: 0 56px; scale: 0.94; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes settle {
  from { scale: 0.94; translate: 0 32px; }
  to { scale: 1; translate: 0 0; }
}

@keyframes screen-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes march {
  from { stroke-dashoffset: 156; }
  to { stroke-dashoffset: 0; }
}

@keyframes step-through {
  0% { opacity: 0; translate: 0 48px; }
  22%, 78% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 -48px; }
}

@keyframes digit-in {
  from { opacity: 0; translate: 0 0.22em; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

/* The Digital Crown scene: the article from its top to its end, the
   scrollbar with it, and the cue's arrow three and a half turns. Short
   holds at each end leave room for phone toolbars coming and going. */
@keyframes r-glide {
  0%, 5% { translate: 0 0; }
  92%, 100% { translate: 0 calc(-100% + var(--body-h)); }
}

@keyframes r-thumb {
  0%, 5% { translate: 0 0; }
  92%, 100% { translate: 0 233.33%; }
}

@keyframes cue-turn {
  0%, 5% { rotate: 0deg; }
  92%, 100% { rotate: 1260deg; }
}

/* One hint after the other, never both at once. */
@keyframes cue-live {
  0%, 4% { opacity: 1; }
  6%, 100% { opacity: 0; }
}

@keyframes cue-still {
  0%, 6% { opacity: 0; }
  8%, 100% { opacity: 1; }
}

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

  /* Fallback reveal, driven by the script. Elements already on screen are never hidden. */
  .is-pre {
    opacity: 0;
    translate: 0 24px;
    transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out), scale 0.9s var(--ease-out);
  }

  .tile.is-pre {
    translate: 0 48px;
    scale: 0.95;
  }

  .tile.is-pre:nth-child(even) {
    transition-delay: 0.08s;
  }

  .is-pre.is-in {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  .code.is-pre {
    opacity: 1;
    translate: 0 0;
  }

  .code.is-pre span {
    opacity: 0;
    translate: 0 0.22em;
    transition: opacity 0.8s var(--ease-out), translate 0.8s var(--ease-out);
  }

  .code.is-in span {
    opacity: 1;
    translate: 0 0;
  }

  .code span:nth-child(2) { transition-delay: 0.06s; }
  .code span:nth-child(3) { transition-delay: 0.12s; }
  .code span:nth-child(5) { transition-delay: 0.18s; }
  .code span:nth-child(6) { transition-delay: 0.24s; }
  .code span:nth-child(7) { transition-delay: 0.3s; }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 28%;
    }

    .tile {
      animation: tile-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    .tile:nth-child(even) {
      animation-range: entry 12% cover 36%;
    }

    .tile--big {
      view-timeline: --drag-tile block;
    }

    .trail {
      animation: march linear both;
      animation-timeline: --drag-tile;
      animation-range: cover 0% cover 100%;
    }

    /* The glow settles; the watch stays still, as Apple asks, and the
       screen stays on its line. */
    .hero-glow {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 50%;
    }

    .diagram-line {
      animation: draw linear both;
      animation-timeline: --diagram;
      animation-range: entry 40% cover 55%;
    }

    .code span {
      animation: digit-in linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }

    .code span:nth-child(2) { animation-range: entry 16% cover 34%; }
    .code span:nth-child(3) { animation-range: entry 22% cover 38%; }
    .code span:nth-child(5) { animation-range: entry 28% cover 42%; }
    .code span:nth-child(6) { animation-range: entry 34% cover 46%; }
    .code span:nth-child(7) { animation-range: entry 40% cover 50%; }

    /* Pinned scene: each step's words travel through the middle of the screen. */
    /* Only in the wide pinned layout; on phones the words pin under the watch instead. */
    @media (min-height: 560px) and (min-width: 734px) {
      .js .step-copy {
        animation: step-through linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
      }
    }
  }

  /* Screen changes tied to each step's scroll position. Needs timeline-scope;
     without it the script switches the screens instead. */
  @supports (animation-timeline: view()) and (timeline-scope: --a) {
    .js .scene {
      timeline-scope: --step-1, --step-2, --step-3;
    }

    .js .step[data-step="1"] { view-timeline: --step-1 block; }
    .js .step[data-step="2"] { view-timeline: --step-2 block; }
    .js .step[data-step="3"] { view-timeline: --step-3 block; }

    .js .scene-screen {
      transition: none;
    }

    .js .scene-screen--2 {
      animation: screen-in linear both;
      animation-timeline: --step-2;
      animation-range: cover 17% cover 29%;
    }

    .js .scene-screen--3 {
      animation: screen-in linear both;
      animation-timeline: --step-3;
      animation-range: cover 17% cover 29%;
    }
  }
}

/* The Digital Crown scene, pinned: the frame stays on screen for 110% of
   the window's height of scrolling (a few wheel turns or two swipes), and
   that scrolling plays the scene. CSS only, so it works without the
   script. It pins only where the whole frame fits: 600px tall side by
   side, 640px tall stacked. Shorter windows, browsers without
   scroll-driven animations, reduced motion and print keep the still
   frame. */
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 734px) and (min-aspect-ratio: 1/1) and (min-height: 600px),
  screen and (prefers-reduced-motion: no-preference) and (min-height: 640px) {
  @supports (animation-timeline: view()) {
    .crown {
      display: block;
      min-height: 0;
      padding-block: 0;
    }

    .crown-run {
      height: calc(210vh - var(--nav-h));
      height: calc(210svh - var(--nav-h));
      view-timeline: --crown block;
      view-timeline-inset: var(--nav-h) 0;
    }

    /* At least the window's height, so a frame that is a little too tall
       grows downward inside the run, never under the nav or behind the
       next section. */
    .crown-sticky {
      position: sticky;
      top: var(--nav-h);
      display: flex;
      flex-direction: column;
      justify-content: safe center;
      gap: clamp(12px, 4vh, 40px);
      gap: clamp(12px, 4svh, 40px);
      min-height: calc(100vh - var(--nav-h));
      min-height: calc(100svh - var(--nav-h));
      padding-block: clamp(12px, 4vh, 48px);
      padding-block: clamp(12px, 4svh, 48px);
    }

    .crown .crown-head {
      margin-bottom: 0;
    }

    /* Stacked, the frame is tight on a phone: the spacing is at its least,
       and the stage is as wide as fits under the header (about 250px of
       it). Its height is the larger of 1.03 times its width and 0.465
       times its width plus the 134px watch's 210px. */
    @media not all and (min-width: 734px) and (min-aspect-ratio: 1/1) {
      .crown-sticky {
        gap: 12px;
        padding-block: 12px;
      }

      .crown-stage {
        max-width: min(560px, max(260px, min(calc((100vh - 509px) / 0.465), calc((100vh - 298px) / 1.03))));
        max-width: min(560px, max(260px, min(calc((100svh - 509px) / 0.465), calc((100svh - 298px) / 1.03))));
      }
    }

    .r-page {
      animation: r-glide linear both;
      animation-timeline: --crown;
      animation-range: contain 0% contain 100%;
    }

    .r-thumb {
      animation: r-thumb linear both;
      animation-timeline: --crown;
      animation-range: contain 0% contain 100%;
    }

    .crown-cue-turn {
      animation: cue-turn linear both;
      animation-timeline: --crown;
      animation-range: contain 0% contain 100%;
    }

    .crown-cue-hint--live {
      animation: cue-live linear both;
      animation-timeline: --crown;
      animation-range: contain 0% contain 100%;
    }

    .crown-cue-hint--still {
      animation: cue-still linear both;
      animation-timeline: --crown;
      animation-range: contain 0% contain 100%;
    }
  }
}

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

/* ---------- Squircles ----------
   Continuous-curvature corners where the browser supports corner-shape.
   The radius is larger because a squircle reads smaller than a circular
   corner of the same size. App icons keep their own shape. */

@supports (corner-shape: squircle) {
  .tile,
  .price-card,
  .diagram,
  .get-photo,
  .get-list,
  .platform,
  .card {
    corner-shape: squircle;
  }

  .tile,
  .platform {
    border-radius: 48px;
  }

  .price-card,
  .diagram,
  .get-photo,
  .get-list {
    border-radius: 56px;
  }

  .card {
    border-radius: 40px;
  }

  .glyph-tile {
    corner-shape: squircle;
    border-radius: 24px;
  }

  .button,
  .status,
  .chip,
  .toc a,
  .diagram-label,
  .skip {
    corner-shape: squircle;
  }
}

/* ---------- Print ---------- */

@media print {
  .nav,
  .skip,
  .scene-stage,
  .hero-screen,
  .crown-tag,
  .watch-touch,
  .demo-toggle,
  .crown-screen,
  .crown-cue {
    display: none !important;
  }

  .hero-watch,
  .crown-watch {
    justify-self: center;
    margin: 0 !important;
  }

  .crown-stage {
    grid-template-columns: none !important;
  }

  .crown-watch {
    --watch-w: 280px !important;
  }

  .section,
  .hero {
    min-height: 0 !important;
    padding: 32px 0 !important;
  }

  .step-figure {
    display: block !important;
  }

  .step {
    min-height: 0 !important;
  }

  * {
    animation: none !important;
  }

  /* Browsers skip backgrounds when printing, so print the black sections
     as dark text on white. */
  .section--dark {
    --section-bg: #fff;
    --tile-bg: #f5f5f7;
    --text: #1d1d1f;
    --text-2: #6e6e73;
    --link: #3657e0;
    --eyebrow: #3657e0;
    --icon: #3657e0;
    --hairline: rgba(0, 0, 0, 0.12);
    --chip: rgba(0, 0, 0, 0.05);
  }

  .code span {
    color: #1d1d1f;
    background: none;
  }

  /* Anything the scroll reveal had not reached yet. */
  .is-pre,
  .is-pre span {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }
}