/* Palette and type deliberately match the app, so the page and the thing it
   sells look like one product. */
:root {
  color-scheme: light;
  --plane:     #f9f9f7;
  --surface:   #fcfcfb;
  --ink:       #0b0b0b;
  --ink-2:     #52514e;
  --ink-muted: #898781;
  --hairline:  rgba(11,11,11,0.10);
  --wash:      rgba(11,11,11,0.04);
  --blue:      #2a78d6;
  --yellow:    #d4a000;
  --red:       #d4342a;
  --shadow:    0 1px 2px rgba(11,11,11,0.05), 0 8px 24px rgba(11,11,11,0.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --plane: #0d0d0d; --surface: #1a1a19; --ink: #fff; --ink-2: #c3c2b7;
    --ink-muted: #898781; --hairline: rgba(255,255,255,0.10); --wash: rgba(255,255,255,0.06);
    --blue: #3987e5; --yellow: #f0bc2e; --red: #ef5a4d;
    --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero { padding: 64px 0 8px; text-align: center; }
.dots { display: flex; gap: 14px; justify-content: center; margin-bottom: 30px; }
.dots i { width: 30px; height: 30px; border-radius: 50%; display: block; }
/* The footer echoes the hero, so colour opens and closes the page */
.dots-sm { justify-content: flex-start; gap: 7px; margin-bottom: 16px; }
.dots-sm i { width: 11px; height: 11px; }
.dots i:nth-child(1) { background: var(--blue); }
.dots i:nth-child(2) { background: var(--yellow); }
.dots i:nth-child(3) { background: var(--red); }

h1 {
  margin: 0 0 14px;
  font-size: clamp(2.25rem, 9vw, 3.5rem); font-weight: 680;
  letter-spacing: -0.03em; line-height: 1.05;
}
.lede { margin: 0 auto 30px; max-width: 30em; font-size: 1.125rem; color: var(--ink-2); }

.cta {
  display: inline-block; text-decoration: none;
  background: var(--ink); color: var(--plane);
  font-size: 1rem; font-weight: 620;
  padding: 14px 28px; border-radius: 999px;
  box-shadow: var(--shadow);
  transition: transform .1s ease;
}
.cta:hover { transform: translateY(-1px); }
.cta:active { transform: translateY(0); }
.fineprint { margin: 14px 0 0; font-size: .8125rem; color: var(--ink-muted); }

/* ── Sections ─────────────────────────────────────────────── */
section { padding: 52px 0; border-top: 1px solid var(--hairline); }
section:first-of-type { border-top: 0; }
.label {
  margin: 0 0 22px;
  font-size: .6875rem; font-weight: 640; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted);
}
h2 { margin: 0 0 8px; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; }
p  { margin: 0; color: var(--ink-2); }

.steps { display: grid; gap: 30px; }
@media (min-width: 620px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.step h2::before {
  content: ""; display: block; width: 22px; height: 4px; border-radius: 2px; margin-bottom: 12px;
}
.step:nth-child(1) h2::before { background: var(--blue); }
.step:nth-child(2) h2::before { background: var(--yellow); }
.step:nth-child(3) h2::before { background: var(--red); }

.pillars { display: grid; gap: 26px; }
@media (min-width: 620px) { .pillars { grid-template-columns: 1fr 1fr; gap: 26px 34px; } }

/* ── Screenshot switcher ──────────────────────────────────────
   Two radios plus :checked selectors, so the tabs work with no JavaScript at
   all — and they mirror the app's own tab bar, so the control teaches the app. */
figure { margin: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.switch { position: relative; }
.switch-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.switch-tabs label {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 999px; cursor: pointer; user-select: none;
  font-size: .875rem; font-weight: 550; color: var(--ink-2);
  border: 1px solid var(--hairline);
}
.switch-tabs label:hover { background: var(--wash); color: var(--ink); }
#pick-tap:checked ~ .switch-tabs label[for="pick-tap"],
#pick-timeline:checked ~ .switch-tabs label[for="pick-timeline"] {
  color: var(--ink); font-weight: 650; background: var(--wash); border-color: transparent;
}
#pick-tap:focus-visible ~ .switch-tabs label[for="pick-tap"],
#pick-timeline:focus-visible ~ .switch-tabs label[for="pick-timeline"] {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
.pane { display: none; }
#pick-tap:checked ~ .pane-tap,
#pick-timeline:checked ~ .pane-timeline { display: block; }
.pane img {
  display: block; width: 100%; max-width: 400px; height: auto;
  border: 1px solid var(--hairline); border-radius: 18px; box-shadow: var(--shadow);
}
.pane figcaption { margin-top: 12px; font-size: .8125rem; color: var(--ink-muted); }

/* ── Use cases ────────────────────────────────────────────── */
.uses { display: grid; gap: 2px; margin: 0; }
.use {
  display: grid; grid-template-columns: 2rem 1fr; gap: 3px 14px;
  padding: 16px 0; border-bottom: 1px solid var(--hairline);
}
.use:last-child { border-bottom: 0; }
.use .pic { grid-row: 1 / span 2; font-size: 1.25rem; line-height: 1.3; }
.use dt { color: var(--ink); font-weight: 620; }
.use dd { margin: 0; color: var(--ink-2); }

/* ── Footer ───────────────────────────────────────────────── */
footer {
  padding: 40px 0 64px; border-top: 1px solid var(--hairline);
  font-size: .8125rem; color: var(--ink-muted);
}

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