/* Wremote 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 drawing (CSS, not a photo) ---------- */

.watch {
  --watch-w: 240px;
  position: relative;
  width: var(--watch-w);
  max-width: 100%;
  margin-inline: auto;
  container-type: inline-size;
}

.watch-case {
  position: relative;
  padding: 10px;
  padding: 4.4cqi;
  border: 4px solid transparent;
  border: 1.8cqi solid transparent;
  border-radius: 54px;
  border-radius: 23cqi;
  background:
    linear-gradient(#050506, #050506) padding-box,
    linear-gradient(155deg, #9a9aa1 0%, #3c3c41 16%, #17171a 42%, #0b0b0c 62%, #3e3e44 86%, #a3a3aa 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 30px 60px -24px rgba(0, 0, 0, 0.45),
    0 10px 20px -10px rgba(0, 0, 0, 0.3);
}

.watch-screen {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: 40px;
  border-radius: 17cqi;
  background: #000;
  aspect-ratio: 416 / 496;
}

.watch-screen > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A faint reflection across the glass. */
.watch-screen::after {
  content: "";
  grid-area: 1 / 1;
  z-index: 2;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}

/* One plain nub on the side, so it reads as a watch without copying real hardware. */
.watch::before {
  content: "";
  position: absolute;
  top: 25%;
  right: -7px;
  right: -3cqi;
  width: 10px;
  width: 4.2cqi;
  height: 14%;
  border-radius: 4px;
  border-radius: 1.6cqi;
  background: #3a3a3f;
}

/* ---------- 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(32px, 5vh, 56px);
  padding-bottom: clamp(32px, 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;
}

.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 watch is the hero, in front of the lower half of the Mac menu,
   so the menu's title and status line stay in view. */
.hero-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: clamp(28px, 4vh, 48px) auto 0;
  margin: clamp(28px, 4svh, 48px) auto 0;
  aspect-ratio: 1 / 1;
}

.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: -14% -6% -16% -6%;
}

.hero-mac {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 74%;
}

.hero-mac img {
  width: 100%;
}

.hero-watch {
  --watch-w: 57%;
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 1%;
  margin: 0;
}

/* Wider screens: the watch stands beside the menu, its nub just short of the
   menu's edge, so none of the menu's text is covered. The stage is capped at
   800px so the 2x screenshots stay sharp, and by the screen's height so the
   whole composition fits on a laptop screen. */
@media (min-width: 734px) {
  .hero-stage {
    max-width: min(800px, max(520px, calc((100vh - 470px) * 2.5)));
    max-width: min(800px, max(520px, calc((100svh - 470px) * 2.5)));
    aspect-ratio: 1 / 0.4;
  }

  .hero-mac {
    right: auto;
    left: 38%;
    width: 48%;
  }

  .hero-watch {
    --watch-w: 28.8%;
    top: 7%;
    left: 12.5%;
  }
}

/* ---------- 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;
}

.step-figure .watch {
  --watch-w: clamp(180px, 46vw, 240px);
}

.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%;
  }

  /* At most 240px wide so the 416px screenshots stay sharp, and never taller
     than the space under the nav bar (the watch is about 1.17 times as tall as wide). */
  .js .watch--scene {
    --watch-w: min(240px, calc((100vh - var(--nav-h) - 64px) / 1.17));
    --watch-w: min(240px, calc((100svh - var(--nav-h) - 64px) / 1.17));
    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;
  }

  /* Screens slide up inside the watch, like scrolling on it: the next
     screen pushes in from below and the last one sinks back. */
  .js .scene-screen {
    transition: translate 0.7s var(--ease-out), opacity 0.7s var(--ease), scale 0.7s var(--ease-out);
  }

  .js .scene-screen--2,
  .js .scene-screen--3 {
    translate: 0 100%;
  }

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

  .js .scene[data-active="2"] .scene-screen--1,
  .js .scene[data-active="3"] .scene-screen--1,
  .js .scene[data-active="3"] .scene-screen--2 {
    translate: 0 -30%;
    opacity: 0;
    scale: 0.96;
  }
}

/* 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. */
  .js .watch--scene {
    --watch-w: min(62vw, 34svh, 240px);
  }

  .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: 132px;
  margin-bottom: 32px;
}

.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: 176px;
    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-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 watch-arrive {
  from { opacity: 0.2; scale: 0.82; translate: 0 10%; }
  to { opacity: 1; scale: 1; translate: 0 0; }
}

@keyframes screen-in {
  from { translate: 0 100%; }
  to { translate: 0 0; }
}

@keyframes screen-out {
  from { translate: 0 0; opacity: 1; scale: 1; }
  to { translate: 0 -30%; opacity: 0; scale: 0.96; }
}

@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; }
}

@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%;
    }

    .hero-stage {
      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: the watch lifts and grows as the scene arrives,
       and each step's words travel through the middle of the screen. */
    .js .scene-grid {
      view-timeline: --scene block;
    }

    .js .watch--scene {
      animation: watch-arrive linear both;
      animation-timeline: --scene;
      animation-range: entry 25% entry 100%;
    }

    /* 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--1 {
      animation: screen-out linear forwards;
      animation-timeline: --step-2;
      animation-range: cover 17% cover 29%;
    }

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

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

@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-list,
  .platform,
  .card {
    corner-shape: squircle;
  }

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

  .price-card,
  .diagram,
  .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;
  }

  .watch-case {
    corner-shape: squircle;
    border-radius: 36cqi;
  }

  .watch-screen {
    corner-shape: squircle;
    border-radius: 30cqi;
  }

  .watch::before {
    corner-shape: squircle;
  }
}

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

@media print {
  .nav,
  .skip,
  .scene-stage {
    display: none !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;
  }
}