/*
  Foldout website: the apps' "Graphite" look, from FoldoutKit/Sources/FoldoutUI.
  Monochrome, hairline cards, one orange accent (Palette.accent) for the main button,
  the logo's fold and things that are live. Colors follow Palette.swift; the background
  is AmbientBackground.swift (a dot grid every 18 pt with a soft light drifting across it).
*/

:root {
  color-scheme: light dark;

  /* Palette.swift */
  --accent: #ff5a1f;
  --on-accent: #fff;
  --canvas: #f3f3f0;
  --surface: rgb(255 255 255 / 0.88);
  --surface-solid: #fff;
  --wash: rgb(0 0 0 / 0.05);
  --hairline: rgb(0 0 0 / 0.09);
  --live: #1db954;

  /* Text: the mark's ink (AppIconArt) and a secondary gray that keeps 4.5:1 on the canvas. */
  --ink: #141416;
  --ink-2: #5d5d62;

  /* AmbientBackground.swift: base dots, and how much a passing light adds (its peak, easing out) */
  --dot: rgb(0 0 0 / 0.10);
  --lit-1: rgb(0 0 0 / 0.244);
  --lit-2: rgb(0 0 0 / 0.205);
  --lit-3: rgb(0 0 0 / 0.122);
  --lit-4: rgb(0 0 0 / 0.038);

  /* The device drawings */
  --bezel: #1c1c1f;
  --deck: #d8d8d3;
  --deck-shade: #c3c3bd;
  --wall-1: #ebe8e3;
  --wall-2: #d5d0c8;
  --menubar: rgb(255 255 255 / 0.62);
  --menubar-ink: rgb(0 0 0 / 0.28);
  --ui-line: rgb(0 0 0 / 0.10);
  --ui-dot: rgb(0 0 0 / 0.16);
  --crease: rgb(255 255 255 / 0.5);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 22px;
  --page: 1120px;
  --gutter: 16px;
}

@media (min-width: 640px) {
  :root { --gutter: 32px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0b0b0c;
    --surface: rgb(23 23 26 / 0.92);
    --surface-solid: #17171a;
    --wash: rgb(255 255 255 / 0.07);
    --hairline: rgb(255 255 255 / 0.11);
    --live: #32d74b;
    --ink: #f3f3f0;
    --ink-2: #a1a1a6;
    --dot: rgb(255 255 255 / 0.12);
    --lit-1: rgb(255 255 255 / 0.386);
    --lit-2: rgb(255 255 255 / 0.324);
    --lit-3: rgb(255 255 255 / 0.193);
    --lit-4: rgb(255 255 255 / 0.06);
    --bezel: #2a2a2f;
    --deck: #2c2c31;
    --deck-shade: #1d1d21;
    --wall-1: #2a2a30;
    --wall-2: #131316;
    --menubar: rgb(18 18 20 / 0.6);
    --menubar-ink: rgb(255 255 255 / 0.34);
    --ui-line: rgb(255 255 255 / 0.12);
    --ui-dot: rgb(255 255 255 / 0.22);
    --crease: rgb(255 255 255 / 0.14);
  }
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font: 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: inherit; }

p { margin: 0 0 1em; }

h1, h2, h3, .display {
  font-stretch: 125%; /* SF Pro Expanded, as in Font.display */
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

h3 { font-size: 19px; line-height: 1.3; letter-spacing: 0; }

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

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

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

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

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

/* ---------- The ambient background ---------- */

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--canvas);
  background-image: radial-gradient(circle at 9px 9px, var(--dot) 0.8px, transparent 1.3px);
  background-size: 18px 18px;
}

/* Two lights sweep across the grid, as in AmbientBackground.swift: dots swell and brighten as one passes, and
   the smaller light is orange. The main light runs on 12 s and 16 s periods, the orange one on 10 s and 14 s,
   so the path never visibly repeats. Each light is a brighter copy of the grid (with bigger dots) seen through
   a soft spot. The grid is the mask and only the spots move, so the browser just slides two layers around.
   The resting positions are the apps' frozen frame, used with Reduce Motion. */
.ambient-light {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(circle at 9px 9px, #000 1px, rgb(0 0 0 / 0.5) 1.45px, transparent 1.9px);
  -webkit-mask-size: 18px 18px;
  mask-image: radial-gradient(circle at 9px 9px, #000 1px, rgb(0 0 0 / 0.5) 1.45px, transparent 1.9px);
  mask-size: 18px 18px;
}

.ambient-x {
  position: absolute;
  inset: 0;
  transform: translateX(39vw);
  animation: light-x 6s ease-in-out infinite alternate;
}

.ambient-spot {
  position: absolute;
  width: 72vmax;
  height: 72vmax;
  left: calc(50% - 36vmax);
  top: calc(45% - 36vmax);
  background: radial-gradient(closest-side, var(--lit-1), var(--lit-2) 25%, var(--lit-3) 50%, var(--lit-4) 75%, transparent);
  transform: translateY(28vh);
  animation: light-y 8s ease-in-out infinite alternate;
}

.ember .ambient-x {
  transform: translateX(-33vw);
  animation: ember-x 5s ease-in-out -1.2s infinite alternate;
}

.ember .ambient-spot {
  width: 44vmax;
  height: 44vmax;
  left: calc(50% - 22vmax);
  top: calc(55% - 22vmax);
  background: radial-gradient(closest-side, rgb(255 90 31 / 0.66), rgb(255 90 31 / 0.58) 25%, rgb(255 90 31 / 0.41) 50%, rgb(255 90 31 / 0.24) 75%, transparent);
  transform: translateY(16vh);
  animation: ember-y 7s ease-in-out -3s infinite alternate;
}

@keyframes light-x {
  from { transform: translateX(-45vw); }
  to { transform: translateX(45vw); }
}

@keyframes light-y {
  from { transform: translateY(40vh); }
  to { transform: translateY(-40vh); }
}

@keyframes ember-x {
  from { transform: translateX(-42vw); }
  to { transform: translateX(42vw); }
}

@keyframes ember-y {
  from { transform: translateY(40vh); }
  to { transform: translateY(-40vh); }
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--canvas);
  background: color-mix(in srgb, var(--canvas) 80%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid var(--hairline);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-stretch: 125%;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  border-radius: 8px;
}

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

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a:not(.button) {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 999px;
}

.nav a:not(.button):hover,
.nav a[aria-current="page"] { color: var(--ink); }

.nav .button { margin-left: 8px; }

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

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

/* ---------- The mark ---------- */

.mark .mark-screen { fill: var(--ink); }
.mark .mark-fold { fill: var(--accent); stroke: var(--accent); stroke-width: 5; stroke-linejoin: round; }

/* ---------- Buttons (FoldoutButtonStyle) ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font: 600 17px/1.2 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out, background-color 0.15s ease-out;
}

.button:hover { background: var(--surface-solid); }
.button:active { transform: scale(0.97); opacity: 0.7; }

/* Filled orange: the one thing to do next. White on the accent is 3.1:1, so its label is
   large-text size (19 px bold) to stay readable. */
.button.primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
  font-size: 19px;
  font-weight: 700;
  min-height: 52px;
  padding: 13px 28px;
}
.button.primary:hover { background: #ff6a33; }

.button.compact {
  min-height: 36px;
  padding: 7px 15px;
  font-size: 15px;
}

.button svg { width: 18px; height: 18px; flex: none; }

.button[aria-disabled="true"] {
  cursor: default;
  opacity: 0.55;
}
.button[aria-disabled="true"]:active { transform: none; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ---------- Cards and labels (Surfaces.swift) ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 26px;
}

.label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 12px;
}

.tile {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--wash);
  color: var(--ink);
  margin-bottom: 18px;
}
.tile svg { width: 24px; height: 24px; }
.tile.accent { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }

.icon-stroke { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-fill { fill: currentColor; stroke: none; }

.small { font-size: 14px; color: var(--ink-2); }

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

.section {
  padding: 72px 0;
}

@media (min-width: 900px) {
  .section { padding: 104px 0; }
}

.section-head {
  max-width: 720px;
  margin-bottom: 40px;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(30px, 4.6vw, 46px);
  margin-bottom: 16px;
}

.section-head p {
  color: var(--ink-2);
  font-size: 19px;
  margin: 0;
}

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.grid .card h3 { margin-bottom: 8px; }
.grid .card p { color: var(--ink-2); margin: 0; }
.grid .plan .price-note { margin: 0 0 18px; }
.grid .plan .small { margin: 18px 0 0; }
.grid .download .meta { margin: 0 0 22px; }
.grid .download .small { margin: 18px 0 0; max-width: 30em; }

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

.hero {
  text-align: center;
  padding: 64px 0 24px;
}

@media (min-width: 900px) {
  .hero { padding-top: 104px; }
}

.hero h1 {
  font-size: clamp(40px, 7.4vw, 78px);
  max-width: 13ch;
  margin: 0 auto 22px;
}

.hero .lede {
  max-width: 34em;
  margin: 0 auto 32px;
  color: var(--ink-2);
  font-size: clamp(18px, 2.3vw, 21px);
}

.hero .fineprint {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--ink-2);
}

/* ---------- The device drawings ---------- */

.scene {
  width: min(100%, 940px);
  margin: 56px auto 0;
}

.bezel { fill: var(--bezel); stroke: var(--hairline); stroke-width: 1; }
.deck { fill: var(--deck); }
.deck-shade { fill: var(--deck-shade); }
.wall { fill: url(#wallpaper); }
.wall-1 { stop-color: var(--wall-1); }
.wall-2 { stop-color: var(--wall-2); }
.glow-1 { stop-color: var(--accent); stop-opacity: 0.16; }
.glow-2 { stop-color: var(--accent); stop-opacity: 0; }
.menubar { fill: var(--menubar); }
.menubar-ink { fill: var(--menubar-ink); }
.crease { stroke: var(--crease); stroke-width: 1; }
.ui-window { fill: var(--surface-solid); stroke: var(--hairline); stroke-width: 1; }
.ui-shadow { fill: rgb(0 0 0 / 0.10); filter: blur(6px); }
.ui-line { fill: var(--ui-line); }
.ui-dot { fill: var(--ui-dot); }
.ui-rule { stroke: var(--hairline); stroke-width: 1; }
.photo-1 { stop-color: #ffb48f; }
.photo-2 { stop-color: #ff5a1f; }
.sun { fill: #fff; opacity: 0.9; }
.cursor { fill: #111; stroke: #fff; stroke-width: 1.1; stroke-linejoin: round; }
.tap { fill: none; stroke: var(--accent); stroke-width: 2; }
.dock { fill: var(--menubar); stroke: var(--hairline); stroke-width: 1; }
.dock-icon { fill: var(--ui-dot); }
.dock-icon.foldout { fill: var(--accent); }
.mini-screen { fill: var(--ink); }
.mini-fold { fill: var(--accent); stroke: var(--accent); stroke-width: 5; stroke-linejoin: round; }

/* LinkDots.swift: a light running along five dots, 1.6 s per pass. */
.link-dot { fill: var(--accent); opacity: 0.18; animation: link 1.6s linear infinite; }
.link-dot:nth-of-type(1) { animation-delay: -0.5s; }
.link-dot:nth-of-type(2) { animation-delay: -0.25s; }
.link-dot:nth-of-type(3) { animation-delay: 0s; }
.link-dot:nth-of-type(4) { animation-delay: 0.25s; }
.link-dot:nth-of-type(5) { animation-delay: 0.5s; }

@keyframes link {
  0%, 29% { opacity: 0.18; }
  50% { opacity: 1; }
  71%, 100% { opacity: 0.18; }
}

/* A window dragged off the Mac's screen onto the phone and back. Two copies, each clipped to one
   screen, move together, so it crosses the edge the way it does on a real extended desktop.
   Without motion it rests on the phone. */
.drag { transform: translateX(255px); animation: drag 10s ease-in-out infinite; }

@keyframes drag {
  0%, 12% { transform: translateX(0); }
  34%, 64% { transform: translateX(255px); }
  86%, 100% { transform: translateX(0); }
}

.tap {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: tap 10s ease-out infinite;
}

@keyframes tap {
  0%, 41% { opacity: 0; transform: scale(0.3); }
  42% { opacity: 0.9; transform: scale(0.3); }
  50% { opacity: 0; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* ---------- Fold ---------- */

.split {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1.1fr; gap: 64px; }
  .split.flip > :first-child { order: 2; }
}

.split h2 {
  font-size: clamp(30px, 4.6vw, 46px);
  margin-bottom: 16px;
}

.split .copy p { color: var(--ink-2); font-size: 19px; }

.folds {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 20px;
  align-items: end;
  margin: 0;
}

.folds figure { margin: 0; }

.folds figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-2);
}

.folds figcaption strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}

.facts li {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: 14px;
  color: var(--ink-2);
}

.facts strong { color: var(--ink); font-weight: 600; }

/* ---------- How it works ---------- */

.steps {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.steps li { position: relative; }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--ink-2); margin: 0; }

.step-n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface-solid);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}

.pairing {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.pairing figure { margin: 0; display: flex; flex-direction: column; }

.pairing figcaption {
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-2);
}

.mock {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  flex: 1;
  min-height: 380px;
  justify-content: center;
  padding: 36px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: var(--surface);
}

/* The same dot grid inside each screen. */
.mock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 9px 9px, var(--dot) 0.8px, transparent 1.3px);
  background-size: 18px 18px;
}
.mock { isolation: isolate; }

.mock .mark { width: 44px; height: 44px; }

.mock-title {
  font-stretch: 125%;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  margin: 0;
}

.mock-sub {
  font-size: 15px;
  color: var(--ink-2);
  margin: 0;
  max-width: 28em;
}

.mock-note {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
  max-width: 26em;
}

.mock-buttons {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.mock-buttons .button { min-height: 40px; padding: 8px 22px; font-size: 16px; }
.mock-buttons .button.primary { font-size: 16px; font-weight: 600; min-height: 40px; padding: 8px 26px; }

.lock-badge {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
}
.lock-badge svg { width: 28px; height: 28px; }

/* CodeDigits.swift: thin, wide-set digits over hairlines, in two groups of three. */
.code {
  --digit: 40px;
  display: flex;
  justify-content: center;
  gap: calc(var(--digit) * 0.48);
  margin: 6px 0;
}

.code-group { display: flex; gap: calc(var(--digit) * 0.2); }

.digit {
  display: grid;
  place-items: center;
  width: calc(var(--digit) * 0.82);
  height: calc(var(--digit) * 1.35);
  font-size: var(--digit);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 85%, transparent);
}

@media (max-width: 360px) {
  .code { --digit: 34px; }
}

/* ---------- Menu bar ---------- */

/* Shown at the panel's real size: it's 340 pt wide in the menu bar. */
.panel-shot {
  margin: 0;
  justify-self: center;
  width: min(100%, 340px);
}

.panel-shot img {
  width: 100%;
  border-radius: 18px;
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 18px 48px rgb(0 0 0 / 0.12);
}

.menu-states {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 0;
  margin: 26px 0 0;
  list-style: none;
  font-size: 14px;
  color: var(--ink-2);
}

.menu-states li { display: flex; align-items: center; gap: 9px; }
.menu-states svg { width: 26px; height: 26px; }
.menu-icon .outline { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
.menu-icon .solid { fill: var(--ink); stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }

/* ---------- Pricing ---------- */

.plan h3 { font-size: 24px; margin-bottom: 4px; }
.plan .price-note { color: var(--ink-2); margin-bottom: 18px; }

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.checks li {
  position: relative;
  padding-left: 30px;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.32em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.checks li::after {
  content: "";
  position: absolute;
  left: 7.5px;
  top: calc(0.32em + 4px);
  width: 4px;
  height: 7px;
  border-right: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(45deg);
}

.plan.pro { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

.plan .small { margin: 18px 0 0; }

/* ---------- Download ---------- */

.download {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 36px 26px 30px;
}

.download .app-icon { width: 104px; height: 104px; margin-bottom: 14px; }
.download .app-icon.ios { width: 88px; height: 88px; margin: 8px 0 22px; border-radius: 22.4%; box-shadow: 0 0 0 1px var(--hairline); }

.download h3 { font-size: 22px; }
.download .meta { color: var(--ink-2); margin: 0 0 22px; }
.download .small { margin: 18px 0 0; max-width: 30em; }

/* ---------- Reading pages (support, privacy, terms) ---------- */

.page-head {
  padding: 64px 0 8px;
}

.page-head h1 {
  font-size: clamp(36px, 6vw, 56px);
  margin-bottom: 16px;
}

.page-head .lede {
  color: var(--ink-2);
  font-size: 19px;
  margin: 0;
}

.prose {
  padding: 32px 0 88px;
}

.prose h2 {
  font-size: 24px;
  margin: 48px 0 14px;
}

.prose h3 {
  font-size: 18px;
  margin: 28px 0 8px;
}

.prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.5em; }
.prose li::marker { color: var(--ink-2); }

.prose a,
.faq a,
.legal a,
.inline-link {
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.prose a:hover, .faq a:hover { text-decoration-thickness: 2.5px; }
.prose a.button { text-decoration: none; }

.summary-card {
  margin: 8px 0 8px;
}

.summary-card p:last-child { margin: 0; }

.updated { font-size: 14px; color: var(--ink-2); margin: 18px 0 0; }

.contact-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
}

.contact-card h2 { font-size: 22px; margin: 0 0 6px; }
.contact-card p { margin: 0; color: var(--ink-2); }

/* FAQ: details/summary, no script needed. */
.faq { margin: 0; }

.faq h2 {
  font-size: 13px;
  font-stretch: 100%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 48px 0 6px;
}

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

.faq summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 40px 18px 0;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  border-radius: 8px;
}

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

.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.6px solid var(--ink-2);
  border-bottom: 1.6px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease-out;
}

.faq details[open] > summary::after { transform: translateY(-25%) rotate(225deg); }

.faq .answer { padding: 0 0 20px; color: var(--ink-2); }
.faq .answer p:last-child { margin-bottom: 0; }
.faq .answer ul { padding-left: 1.2em; margin: 0 0 1em; }
.faq .answer li { margin-bottom: 0.4em; }
.faq .answer strong { color: var(--ink); font-weight: 600; }

kbd, .path {
  font: inherit;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- Guide ---------- */

/* Title, then "On this page", then the sections; on wide screens the list sits in a sticky sidebar. */
.guide {
  display: grid;
  grid-template-areas: "head" "nav" "body";
  column-gap: 56px;
  padding-bottom: 88px;
}

.guide > .page-head { grid-area: head; }
.guide-nav { grid-area: nav; margin-top: 28px; }
.guide-body { grid-area: body; min-width: 0; max-width: 720px; }

@media (min-width: 960px) {
  .guide {
    grid-template-columns: 210px minmax(0, 720px);
    grid-template-areas: "nav head" "nav body";
  }
  .guide-nav { margin-top: 0; padding-top: 72px; }
  .guide-nav nav { position: sticky; top: 84px; }
}

.guide-nav nav { padding: 18px 20px 14px; }
.guide-nav ol { list-style: none; margin: 0; padding: 0; }
.guide-nav a {
  display: block;
  padding: 5px 0;
  color: var(--ink-2);
  font-size: 15px;
  text-decoration: none;
}
.guide-nav a:hover { color: var(--ink); }

.guide-section { padding-top: 56px; }
.guide-section h2 { font-size: clamp(26px, 3.6vw, 34px); margin-bottom: 12px; }
.guide-section h3 { font-size: 18px; margin: 28px 0 8px; }
.guide-section ul { padding-left: 1.2em; margin: 0 0 12px; list-style-type: disc; }
.guide-section li { margin-bottom: 0.5em; }
.guide-section li::marker { color: var(--ink-2); }
.guide-section a:not(.button) {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* The Quickstart: numbered steps on a hairline. The last step, the goal, is the orange one. */
.quickstart {
  list-style: none;
  counter-reset: step;
  margin: 32px 0 0;
  padding: 0;
}

.quickstart > li {
  counter-increment: step;
  position: relative;
  margin: 0;
  padding: 0 0 36px 58px;
}

.quickstart > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -5px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface-solid);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.quickstart > li::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 37px;
  bottom: 3px;
  width: 1px;
  background: var(--hairline);
}

.quickstart > li:last-child { padding-bottom: 0; }
.quickstart > li:last-child::after { display: none; }
.quickstart > li:last-child::before { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.quickstart h3 { font-size: 20px; margin: 0 0 8px; }
.quickstart p { margin: 0 0 12px; }
.quickstart .step-action { margin: 18px 0; }

.note {
  margin: 12px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 15px;
}

.code.code-small {
  --digit: 30px;
  justify-content: flex-start;
  margin: 10px 0 18px;
}

.table-card { padding: 4px 22px; margin: 20px 0 16px; }

.gesture-table { width: 100%; border-collapse: collapse; font-size: 16px; }

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

.gesture-table tbody tr:last-child th,
.gesture-table tbody tr:last-child td { border-bottom: 0; }

.gesture-table thead th {
  padding: 14px 0 10px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gesture-table tbody th { width: 38%; padding-right: 16px; font-weight: 600; }
.gesture-table td { color: var(--ink-2); }

@media (max-width: 520px) {
  .gesture-table thead { display: none; }
  .gesture-table tbody th,
  .gesture-table td { display: block; width: auto; }
  .gesture-table tbody th { padding-bottom: 2px; border-bottom: 0; }
  .gesture-table td { padding-top: 0; }
}

.settings { margin: 20px 0 0; }
.settings dt { margin-top: 18px; font-weight: 600; }
.settings dd { margin: 4px 0 0; color: var(--ink-2); }

.guide-section .tasks { list-style: none; padding: 0; display: grid; gap: 10px; }

.guide-section .tasks li {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--surface);
}

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

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 40px 0 56px;
  font-size: 14px;
  color: var(--ink-2);
}

.footer-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1fr auto; align-items: start; }
}

.site-footer .brand { font-size: 17px; }
.site-footer .brand .mark { width: 26px; height: 26px; }
.site-footer .tagline { margin: 10px 0 0; }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.footer-nav a { text-decoration: none; padding: 4px 0; }
.footer-nav a:hover { color: var(--ink); }

.legal {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.6;
}

/* ---------- 404 ---------- */

.lost {
  min-height: calc(100vh - 61px - 160px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 80px 0;
}

.lost .mark { width: 64px; height: 64px; margin: 0 auto 28px; }
.lost h1 { font-size: clamp(32px, 5vw, 48px); margin-bottom: 14px; }
.lost p { color: var(--ink-2); margin-bottom: 28px; }

/* ---------- Motion ---------- */

/* Holds still with Reduce Motion, like the apps. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .link-dot:nth-of-type(3) { opacity: 1; }
}

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