/* OnTask site — values read from the app's Visual Identity (§1 palette, §2 sky,
   §3 type, §4 shape, §6 controls). Type sizes and control heights are fixed at
   every width, as in the app. */

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist_400Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist_500Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist_600SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #0A0F1A;
  --card: #0E1423;
  --row: #121A2B;
  --rule: #343842;
  --ink: #F1F4F9;
  --muted: #999DA4;
  --ghost: rgba(241, 244, 249, .08);
  --sky: radial-gradient(70% 45% at 12% 8%, #101E3B, transparent 70%),
         radial-gradient(70% 45% at 90% 95%, #0A1B39, transparent 70%),
         #0A0F1A;
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--sky);
  color: var(--ink);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--ground);
  border-radius: 12px;
  font-weight: 600;
  z-index: 10;
}
.skip:focus { top: 16px; }

/* ── Layout ─────────────────────────────────────────── */
main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 16px 40px;
}
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 160px);
  min-height: calc(100dvh - 160px);
}
@media (min-width: 768px) {
  main { padding-top: 72px; }
}

/* ── The lockup (§7; sign-in sizes from §12: wordmark 28, mark 40 × 26) ── */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  min-height: 44px;
}
.lockup img { width: 40px; height: 26px; display: block; }

/* ── Type (§3) ──────────────────────────────────────── */
h1, h2 { margin: 0; font-weight: 600; }
.headline {
  margin-top: 32px;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
/* Story 14 §3: where the headline would take three lines it breaks after "tool". */
.br-narrow { display: none; }
@media (max-width: 599px) { .br-narrow { display: inline; } }

.subtitle {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
}
.lede {
  margin: 16px 0 0;
  color: var(--muted);
}

/* ── The form (§6 primary 46, §4 field 44, §12 email column 316) ─────── */
.waitlist {
  margin-top: 32px;
  width: 100%;
  max-width: 316px;
}
.waitlist label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.field {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--row);
  border: 1px solid var(--rule);
  border-radius: 12px;
  color: var(--ink);
  font: 400 17px/1 "Geist", system-ui, sans-serif;
  -webkit-appearance: none;
  appearance: none;
}
.field::placeholder { color: var(--muted); opacity: 1; }
.field[aria-invalid="true"] { border-color: var(--ink); }

.btn-primary {
  display: block;
  width: 100%;
  height: 46px;
  margin-top: 12px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: var(--ground);
  font: 600 16px/1 "Geist", system-ui, sans-serif;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.btn-primary:disabled { opacity: .5; cursor: default; }

.status {
  min-height: 0;
  margin: 12px 0 0;
  color: var(--muted);
}
.status:empty { margin: 0; }
.status.is-done { color: var(--ink); }
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.note {
  margin: 12px 0 0;
  color: var(--muted);
}
/* The honeypot: off-screen for sighted people, aria-hidden for screen readers,
   tabindex -1 so the keyboard never reaches it. A person leaves it empty. */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Footer ─────────────────────────────────────────── */
.site-footer {
  flex-shrink: 0;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px 24px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer li { min-height: 44px; display: flex; align-items: center; }
.site-footer a {
  color: var(--muted);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.site-footer a:hover { color: var(--ink); }

/* ── Legal pages ────────────────────────────────────── */
.doc .lockup { font-size: 28px; }
.doc h1 {
  margin-top: 32px;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.draft-banner {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--card);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.5;
}
.draft-banner span { color: var(--muted); }
.doc h2 {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 17px;
  line-height: 1.35;
  scroll-margin-top: 24px;
}
.doc h3 {
  margin: 28px 0 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.doc h3 + ul { margin-top: 10px; }
.doc .lede { margin-top: 20px; color: var(--ink); }
.doc p, .doc li { color: var(--muted); }
.doc p { margin: 12px 0 0; }
.doc ul { margin: 12px 0 0; padding-left: 20px; }
.doc li + li { margin-top: 10px; }
.doc li ul { margin-top: 8px; }
.doc strong { color: var(--ink); font-weight: 500; }
.doc em { font-style: normal; color: var(--ink); font-weight: 500; }
.doc em.k::before { content: ""; display: block; height: 5px; }
.doc .pending { color: var(--ink); }

/* Contents list under the effective-date line (long documents only) */
.toc {
  margin: 20px 0 0;
  padding: 14px 16px;
  background: var(--card);
  border-radius: 12px;
}
.toc p {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.toc ol {
  margin: 8px 0 0;
  padding-left: 22px;
  columns: 2;
  column-gap: 20px;
}
.toc li {
  margin: 0;
  padding: 3px 0;
  font-size: 14px;
  line-height: 1.4;
  break-inside: avoid;
  color: var(--muted);
}
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover, .toc a:focus-visible { color: var(--ink); text-decoration: underline; }
@media (max-width: 480px) { .toc ol { columns: 1; } }

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

/* Printed copies: light, no sky, no footer links */
@media print {
  html, body { background: #fff; color: #111; }
  body { font-size: 11pt; line-height: 1.45; }
  main, .site-footer { max-width: none; padding: 0; }
  .doc .lockup span, .doc h1, .doc h2, .doc strong, .doc em, .doc p, .doc li { color: #111; }
  .doc h2 { border-top-color: #ccc; break-after: avoid; }
  .draft-banner, .toc { background: none; padding: 0; border: 0; }
  .toc { display: none; }
  a { color: #111; text-decoration: none; }
  a[href^="mailto:"]::after { content: ""; }
  .site-footer { border-top-color: #ccc; }
  .site-footer a::after { content: none; }
}

.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 24px;
}

/* ── /get badge page ────────────────────────────────── */
/* Both badges show at the same visible height (48px; Apple's minimum is 40).
   Apple's badge is the whole image. Google's PNG keeps its official clear space
   (41px of 250 on every side, around a 168px-tall badge), so it is drawn at
   250/168 of the height and pulled in by that clear space. Apple first. */
.doc .badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.doc .badges li { margin: 0; }
.badges li:has(> .badge[hidden]) { display: none; }
.badges li:empty, .badge[hidden] { display: none; }
.badges:not(:has(a:not([hidden]))), .beta-links:not(:has(a:not([hidden]))) { display: none; }
.badge { display: block; line-height: 0; border-radius: 8px; }
.badge-apple img { height: 48px; width: auto; display: block; }
.badge-google img {
  height: calc(48px * 250 / 168);
  width: auto;
  display: block;
  margin: calc(-48px * 41 / 168);
}
.get [data-get-none] { margin-top: 28px; }
.doc .beta-links { margin: 12px 0 0; padding: 0; list-style: none; }
.beta-links li:empty, .beta-links a[hidden] { display: none; }
.get .beta-links li { margin: 0; color: var(--ink); }
.beta-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.get [data-get-none] a { color: var(--ink); }