/* ==========================================================================
   Offscreen: the website

   Loaded after app/css/overlay.css, which carries the real card styles and
   the two bundled faces ("Offscreen Hand" is Gaegu, "Offscreen Round" is
   Nunito). That file resets every margin, so spacing here is explicit.

   One warm paper, one ink, one sage. Terracotta is the red pen: it only ever
   marks things up (rings, arrows, margin notes), never carries meaning alone.
   ========================================================================== */

:root {
  --paper:   #fbf8f0;
  --paper-2: #f4efe2;
  --paper-3: #ebe4d3;
  --ink:     #24282c;
  --ink-2:   #464d53;
  --muted:   #646b70;
  --rule:    rgba(36, 40, 44, .13);
  --rule-2:  rgba(36, 40, 44, .22);
  --accent:  #4f7449;
  --accent-2:#3f5f3a;
  --sage:    #8fae87;
  --pen:     #b4512c;

  --f-round: "Offscreen Round", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-hand:  "Offscreen Hand", "Chalkboard SE", "Segoe Print", cursive;
  --f-body:  -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
  --f-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(18px, 4.4vw, 56px);
  --wide:   1180px;
  --read:   36rem;

  color-scheme: light;
}

html {
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: var(--accent-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
b, strong { color: var(--ink); font-weight: 650; }
code { font-family: var(--f-mono); font-size: .88em; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px;
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--wide); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------------------------------------------------------------------------
   Type
   ------------------------------------------------------------------------- */
.display, h1, h2, h3 {
  font-family: var(--f-round);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.018em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, calc(4.1vw + .6rem), 3.9rem); line-height: 1.04; }
h2 { font-size: clamp(1.85rem, 3.3vw, 2.75rem); line-height: 1.1; }
h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.005em; }
.lede { font-size: clamp(1.06rem, 1.5vw, 1.2rem); line-height: 1.55; color: var(--ink-2); max-width: var(--read); }
.hand { font-family: var(--f-hand); font-weight: 700; }
.muted { color: var(--muted); }
p + p { margin-top: .9em; }

/* ---------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 22px;
}
.top .home { display: inline-flex; line-height: 0; border-radius: 10px; }
.top .wm { display: block; height: auto; }
.top nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.top nav a {
  color: var(--ink-2); text-decoration: none; font-size: 15px;
}
.top nav a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 640px) {
  .top nav a.opt { display: none; }
}

/* ---------------------------------------------------------------------------
   Buttons and the download block
   ------------------------------------------------------------------------- */
.button {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-round); font-weight: 700; font-size: 17px; line-height: 1;
  color: #fff; background: var(--accent);
  padding: 16px 24px 16px 20px;
  border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 22px -12px rgba(47,73,42,.8);
  transition: background 140ms, transform 140ms;
}
.button:hover { background: var(--accent-2); color: #fff; }
.button:active { transform: translateY(1px); }
.button svg { flex: 0 0 auto; }
.button.quiet {
  color: var(--ink); background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--rule-2);
  padding: 14px 20px;
  font-size: 16px;
}
.button.quiet:hover { background: var(--paper-2); color: var(--ink); }

.dl { display: grid; gap: 14px; justify-items: start; }
.dl .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.dl .alt { font-size: 15.5px; color: var(--ink-2); }
.dl .alt a { color: var(--ink); }
.dl .facts {
  font-size: 14.5px; color: var(--muted); letter-spacing: .01em;
  display: flex; flex-wrap: wrap; gap: 4px 0;
}
.dl .facts span:not(:last-child)::after { content: "\00b7"; margin: 0 .55em; color: var(--muted); }

/* phones get a different block entirely: there is nothing to install */
.dl .phone { display: none; }
html[data-os="phone"] .dl .pc { display: none; }
html[data-os="phone"] .dl .phone { display: grid; gap: 12px; }
.dl .phone p { font-size: 16px; color: var(--ink); max-width: 30ch; }
/* the phone block's 16px would otherwise win and wrap this line mid-dot */
.dl .phone .facts { font-size: 13.5px; color: var(--muted); max-width: none; }
.dl .phone p b { font-family: var(--f-round); }
.dl .phone .row { gap: 10px; }
.dl .phone .button { font-size: 16px; padding: 14px 20px; }
.copied { font-size: 14px; color: var(--accent-2); }
.copied:empty { display: none; }

/* ---------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 5.4fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(20px, 4vw, 48px) clamp(48px, 6vw, 80px);
}
.hero h1 { max-width: 13.5ch; }
.hero h1 .does { color: var(--accent); display: inline-block; position: relative; white-space: nowrap; }
.hero .lede { margin-top: 22px; max-width: 29rem; }
.hero .dl { margin-top: 30px; }
.dl .pc { display: grid; gap: 12px; justify-items: start; }

/* The desk: a quiet screen for the real card to arrive on. Drawn in the
   same outline hand as the characters, not a photo of a laptop. */
.desk {
  position: relative;
  aspect-ratio: 16 / 12.2;
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 20% 110%, rgba(143,174,135,.28), transparent 60%),
    linear-gradient(180deg, #ece6d6, #e4dccb);
  box-shadow: inset 0 0 0 1.5px rgba(36,40,44,.16), 0 30px 60px -40px rgba(36,40,44,.45);
  overflow: hidden;
  isolation: isolate;
}
.desk .bar {
  position: absolute; inset: 0 0 auto 0; height: 30px; z-index: 3;
  display: flex; align-items: center; gap: 16px; padding: 0 14px;
  background: rgba(251,248,240,.72);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(36,40,44,.08);
  font-size: 12.5px; color: var(--ink-2);
}
.desk .bar i { display: block; height: 7px; border-radius: 4px; background: rgba(36,40,44,.18); }
.desk .bar .sp { flex: 1; }
.desk .bar .mark { color: var(--ink); line-height: 0; background: none; border: 0; padding: 3px; margin: -3px; border-radius: 6px; cursor: pointer; }
.desk .bar .mark:hover { background: rgba(36,40,44,.08); }
.desk .bar .mark svg { display: block; }
.desk .bar .mark circle { transition: cx 320ms cubic-bezier(.3,.7,.3,1); }
.desk .bar time { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* a document you were in the middle of */
.desk .doc {
  position: absolute; left: 7%; top: 16%; width: 56%; height: 92%;
  background: #fffdf8; border-radius: 10px;
  box-shadow: 0 1px 0 rgba(36,40,44,.06), 0 20px 40px -24px rgba(36,40,44,.35);
  padding: 34px 28px 0;
}
.desk .doc::before {
  content: ""; position: absolute; left: 12px; top: 11px;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(36,40,44,.16);
  box-shadow: 13px 0 0 rgba(36,40,44,.16), 26px 0 0 rgba(36,40,44,.16);
}
.desk .doc b { display: block; height: 11px; width: 58%; border-radius: 6px; background: rgba(36,40,44,.72); margin-bottom: 18px; }
.desk .doc i { display: block; height: 7px; border-radius: 4px; background: rgba(36,40,44,.13); margin-bottom: 11px; }
.desk .doc i:nth-child(3n) { width: 86%; }
.desk .doc i:nth-child(4n) { width: 64%; margin-bottom: 22px; }
.desk .doc .cur { display: inline-block; width: 2px; height: 14px; background: var(--accent); vertical-align: -2px; margin-left: 2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* where the card lands: under the menu bar, top right, as on a real desktop */
.desk .stage {
  position: absolute; inset: 30px 0 0 0; z-index: 2;
  display: flex; justify-content: flex-end; align-items: flex-start;
  overflow: hidden;
  padding: 10px 14px 0 0;
}
.desk .stage .nudge { margin: 0; flex: 0 0 auto; }
.desk .note {
  position: absolute; right: 24px; top: 50px; z-index: 2;
  font-family: var(--f-hand); font-weight: 700; font-size: 22px; line-height: 1.2;
  color: var(--ink); text-align: right; max-width: 15ch;
  opacity: 0; transform: translateY(6px);
  transition: opacity 260ms, transform 260ms;
  pointer-events: none;
}
.desk .note.on { opacity: 1; transform: none; }

.hero-card { position: relative; }
.desk .another {
  position: absolute; left: 14px; bottom: 12px; z-index: 3;
  font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer;
  background: rgba(251,248,240,.8); border: 0; border-radius: 999px; padding: 6px 12px;
  box-shadow: 0 0 0 1px var(--rule);
}
.desk .another:hover { color: var(--ink); background: var(--paper); }
.hero-card .aside {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 16px 6px 0 auto; max-width: 25rem; justify-content: flex-end;
  font-family: var(--f-hand); font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--ink-2);
  text-align: right;
}
.hero-card .aside svg { flex: 0 0 auto; margin-top: -14px; }

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 14ch; }
  .desk { aspect-ratio: 16 / 9.4; min-height: 440px; }
}
@media (max-width: 560px) {
  .desk { aspect-ratio: auto; height: 430px; border-radius: 14px; }
  .desk .doc { left: 16px; top: 52px; width: 64%; padding: 30px 18px 0; }
  .desk .stage { padding: 12px 10px 0 0; }
  .desk .stage .nudge { width: min(300px, calc(100vw - 2 * var(--gutter) - 20px)); }
  .desk .bar .opt { display: none; }
  .hero-card .aside { font-size: 18px; }
}

/* ---------------------------------------------------------------------------
   Three points, said once each
   ------------------------------------------------------------------------- */
.points {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  padding-block: 40px clamp(64px, 8vw, 104px);
  border-top: 1px solid var(--rule);
}
.points h2 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.005em; margin-bottom: 8px; }
.points p { font-size: 16px; line-height: 1.6; max-width: 30rem; }
.points a { white-space: nowrap; }
@media (max-width: 760px) { .points { grid-template-columns: minmax(0, 1fr); gap: 26px; } }

/* One quiet line for companies, after the product has made its case */
.teams { padding-block: 0 clamp(40px, 5vw, 64px); margin-top: calc(-1 * clamp(24px, 4vw, 56px)); }
.teams p { font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.teams b { color: var(--ink); font-weight: 600; }
.teams a { color: var(--ink-2); white-space: nowrap; }

/* a word that shows a card when you point at it */
/* A dotted border, not text-decoration: Safari draws a button as a solid box
   and ignores underlines on it, so the hint that it can be hovered vanished.
   .nb keeps the word with the punctuation after it, which Safari otherwise
   breaks onto its own line. */
.peek {
  font: inherit; line-height: 1.25; color: var(--ink); background: none; cursor: help;
  -webkit-appearance: none; appearance: none; border-radius: 0;
  border: 0; border-bottom: 1.5px dotted var(--muted); padding: 0;
}
.peek:hover, .peek[aria-expanded="true"] { color: var(--accent-2); border-bottom-color: var(--accent); }
.nb { white-space: nowrap; }
.peekcard {
  position: absolute; z-index: 20; width: 260px; pointer-events: none;
  animation: peek-in 180ms cubic-bezier(.3,.7,.3,1) both;
}
.peekcard .nudge { width: 260px; margin: 0; }
.peekcard .nudge > * { zoom: .87; }
@keyframes peek-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }

/* the page's own nudge, in the corner of the real window */
.corner {
  position: fixed; z-index: 30; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
  width: min(300px, calc(100vw - 24px));
}
.corner .nudge { width: 100%; margin: 0; }
.corner:empty { display: none; }

/* ---------------------------------------------------------------------------
   Install panel
   ------------------------------------------------------------------------- */
.how {
  font: inherit; font-size: 15px; color: var(--ink); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2);
  justify-self: start;
}
.how:hover { text-decoration-color: var(--ink); }

dialog.install {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  margin: auto; padding: 28px 28px 24px; border: 0; border-radius: 18px;
  background: var(--paper); color: var(--ink-2);
  box-shadow: 0 30px 80px -30px rgba(20,23,26,.5);
  overflow-y: auto;
}
dialog.install::backdrop { background: rgba(36,40,44,.32); }
dialog.install[open] { animation: peek-in 200ms cubic-bezier(.3,.7,.3,1) both; }
.in-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.in-head h2 { font-size: 1.35rem; }
.x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--paper-3); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.install .why { margin-top: 10px; font-size: 15px; }
.install ol { margin: 20px 0 0 1.2em; display: grid; gap: 8px; font-size: 15.5px; }
.install ol li::marker { font-family: var(--f-round); color: var(--ink); }
.install .mock { margin: 18px auto 0; }
.install .other { margin-top: 16px; font-size: 14.5px; color: var(--muted); }
.install .other button { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
details.term { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 12px; font-size: 14.5px; }
details.term summary { cursor: pointer; color: var(--ink); font-family: var(--f-round); }
details.term p { margin-top: 8px; }
.cmd {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  background: #22262a; color: #e8ecef; border-radius: 10px; padding: 8px 8px 8px 12px;
}
.cmd code { flex: 1 1 auto; overflow-x: auto; white-space: nowrap; font-size: 12.5px; }
.cmd button { flex: 0 0 auto; font: inherit; font-size: 13px; color: #22262a; background: #e8ecef; border: 0; border-radius: 7px; padding: 5px 10px; cursor: pointer; }
.install .qa { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14.5px; }
.install .qa dt { font-family: var(--f-round); color: var(--ink); }
@media (max-width: 480px) {
  dialog.install { padding: 22px 18px 20px; }
  .install .qa { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .install .qa dd { margin-bottom: 8px; }
}

/* the one illustrated moment per OS: simplified, not a screenshot */
.mock { font-family: var(--f-body); font-size: 12px; line-height: 1.35; color: #25282b; width: 100%; max-width: 380px; }
.mock .win { background: #f6f6f5; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 14px 30px -20px rgba(0,0,0,.45); }
.mock .tb { height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: #ecebea; border-bottom: 1px solid rgba(0,0,0,.07); font-size: 11px; color: #555; }
.mock .tb .d { width: 9px; height: 9px; border-radius: 50%; background: #d3d1ce; }
.mock .tb .t { flex: 1; text-align: center; margin-right: 40px; }
.mock .mb { display: inline-block; border-radius: 6px; padding: 5px 12px; font-size: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.14); white-space: nowrap; }
.mock .hl { box-shadow: 0 0 0 1px rgba(0,0,0,.14), 0 0 0 4px rgba(79,116,73,.35); }
.m-set .pane { padding: 12px 14px 16px; }
.m-set h5 { font-size: 12.5px; margin-bottom: 6px; font-weight: 600; }
.m-set .grp { background: #fff; border-radius: 8px; padding: 10px 11px; box-shadow: 0 0 0 1px rgba(0,0,0,.07); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.m-set .grp span:first-child { font-size: 11.5px; color: #3b3f43; }
.w-smart .blue { background: #1f5f9e; color: #fff; border-radius: 4px; padding: 16px 18px 14px; }
.w-smart h6 { font-size: 17px; font-weight: 300; }
.w-smart dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 11px; color: rgba(255,255,255,.85); margin: 10px 0 14px; }
.w-smart .btns { display: flex; justify-content: flex-end; gap: 8px; }
.w-smart .wb { display: inline-block; padding: 5px 13px; font-size: 11.5px; border: 1.5px solid rgba(255,255,255,.8); }
.w-smart .wb.hl { box-shadow: 0 0 0 4px rgba(255,255,255,.3); }

/* ---------------------------------------------------------------------------
   Footer: one line
   ------------------------------------------------------------------------- */
.foot { padding-block: 22px 32px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
.foot p { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.foot a { color: var(--ink-2); }
.foot span { color: var(--rule-2); }

/* ---------------------------------------------------------------------------
   Prose pages (privacy, changelog, 404)
   ------------------------------------------------------------------------- */
.page { padding-block: clamp(40px, 7vw, 96px) clamp(72px, 9vw, 120px); }
.page .intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.page h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); max-width: 16ch; }
.page .intro .lede { margin-top: 18px; }
.prose { max-width: 42rem; margin-top: clamp(40px, 6vw, 72px); }
.prose h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 52px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 17px; }
.prose ul { margin: 12px 0 0 1.1em; display: grid; gap: 8px; }
.prose li::marker { color: var(--accent); }
.prose .aside { font-family: var(--f-hand); font-weight: 700; font-size: 21px; color: var(--ink-2); margin-top: 18px; }
.prose code { background: var(--paper-3); padding: 2px 6px; border-radius: 5px; }
.release { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px 48px; padding-top: 34px; border-top: 1px solid var(--rule-2); margin-top: clamp(40px, 6vw, 64px); }
.release .v { font-family: var(--f-round); font-size: 28px; color: var(--ink); line-height: 1.1; }
.release time { display: block; font-size: 14.5px; color: var(--muted); margin-top: 6px; }
.release h2 { font-size: 1.3rem; margin-bottom: 12px; }
.release ul { margin: 14px 0 0 1.1em; display: grid; gap: 8px; }
.release li::marker { color: var(--accent); }
@media (max-width: 640px) {
  .release { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .page .intro { grid-template-columns: minmax(0, 1fr); }
}
.lost { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: center; min-height: 60vh; }
.lost .nudge { margin: 0; transform: rotate(2deg); }
@media (max-width: 760px) { .lost { grid-template-columns: minmax(0, 1fr); } .lost .nudge { width: min(300px, 100%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; }
}
.prose ul + p { margin-top: 16px; }

/* the rules above the points and the footer end where the text does */
.points, .foot {
  padding-inline: 0;
  width: min(calc(var(--wide) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
}
.in-head h2:focus { outline: none; }