/* Layout: one long page; a hero with the waitlist, or the downloads once the app's out,
   beside a sketch of the app's window with a made-up backup open in it, then plain sections
   on the same dark ground. Dark first, with a light palette for people whose system is set
   to light, or who pick it for a page with the button in the header (data-theme, set by the
   script in the pages' heads).
   Sections are set like a manual: hairlines and run-in heads rather than cards, in the
   icon's pink. */

/* The fonts, from fonts/ on this site rather than from Google Fonts, so a visit reaches
   no one else (see privacy.html). They're Google Fonts' Latin subsets, as the pages used
   to load them (fonts/OFL.txt is their licence). */
@font-face {
  font-family: "Onest";
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/onest.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Young Serif";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/young-serif.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #0a0b0d;
  --bg-raised: #0f1114;
  --surface: #131518;
  --surface-2: #1b1e23;
  --menu: #16181c;
  --menu-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.15);
  --fg: #eef0f3;
  --muted: #8f96a0;

  /* The icon's pink, as the app's window has it. */
  --accent: #ff6f8f;
  --accent-text: #ffa3b8;
  --accent-soft: rgba(255, 111, 143, 0.16);
  --cta: #ff6f8f;
  --cta-hover: #ff8ba4;
  --cta-ink: #2a0618;
  --heart: #f2626b;
  --ok: #5eead4;
  --err: #ff8a80;

  /* The app's window, in the hero and the privacy section: its colours on a dark Mac
     (app/static/window.html's), then its edge and shadow on this page. */
  --win-bg: #0f1114;
  --win-side: #0b0c0f;
  --win-surface: #15171b;
  --win-bar: #17191d;
  --win-line: rgba(255, 255, 255, 0.08);
  --win-line-strong: rgba(255, 255, 255, 0.2);
  --win-fg: #eef0f3;
  --win-muted: #8f96a0;
  --win-accent-text: #ffa3b8;
  --win-accent-soft: rgba(255, 111, 143, 0.18);
  --win-cta: #ff6f8f;
  --win-cta-hover: #ff8ba4;
  --win-cta-ink: #2a0618;
  --win-quiet: rgba(255, 255, 255, 0.1);
  --win-ring: rgba(255, 111, 143, 0.35);
  --win-bad: #ff7070;
  --win-edge: rgba(255, 255, 255, 0.12);
  --win-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);

  /* The threads, drawn as they look on the phone: Messages' bubbles, then WhatsApp's. */
  --bub-in: #26262b;
  --bub-in-ink: #eef0f3;
  --bub-out: #0a84ff;
  --wa-bg: #0b141a;
  --wa-in: #202c33;
  --wa-out: #005c4b;
  --wa-ink: #e9edef;
  --wa-time: rgba(233, 237, 239, 0.6);

  --font-display: "Young Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-body: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius: 10px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f3f5f8;
    --bg-raised: #ebeef3;
    --surface: #ffffff;
    --surface-2: #f2f4f8;
    --menu: #ffffff;
    --menu-shadow: 0 18px 40px -14px rgba(14, 20, 32, 0.28);
    --line: rgba(14, 20, 32, 0.09);
    --line-strong: rgba(14, 20, 32, 0.17);
    --fg: #0e1218;
    --muted: #59606d;
    --accent: #c8325f;
    --accent-text: #a8264f;
    --accent-soft: rgba(200, 50, 95, 0.12);
    --cta: #c8325f;
    --cta-hover: #b02a52;
    --cta-ink: #ffffff;
    --heart: #d42a3a;
    --ok: #0f766e;
    --err: #c62828;
    --win-bg: #f3f5f8;
    --win-side: #ebeef3;
    --win-surface: #ffffff;
    --win-bar: #e3e6eb;
    --win-line: rgba(14, 20, 32, 0.09);
    --win-line-strong: rgba(14, 20, 32, 0.2);
    --win-fg: #0e1218;
    --win-muted: #59606d;
    --win-accent-text: #a8264f;
    --win-accent-soft: rgba(200, 50, 95, 0.12);
    --win-cta: #c8325f;
    --win-cta-hover: #b02a52;
    --win-cta-ink: #ffffff;
    --win-quiet: rgba(14, 20, 32, 0.07);
    --win-ring: rgba(200, 50, 95, 0.25);
    --win-bad: #c42b2b;
    --win-edge: rgba(14, 20, 32, 0.14);
    --win-shadow: 0 30px 60px -24px rgba(14, 20, 32, 0.3);
    --bub-in: #e9e9eb;
    --bub-in-ink: #0e1218;
    --bub-out: #007aff;
    --wa-bg: #efeae2;
    --wa-in: #ffffff;
    --wa-out: #d9fdd3;
    --wa-ink: #111b21;
    --wa-time: rgba(17, 27, 33, 0.5);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f8;
  --bg-raised: #ebeef3;
  --surface: #ffffff;
  --surface-2: #f2f4f8;
  --menu: #ffffff;
  --menu-shadow: 0 18px 40px -14px rgba(14, 20, 32, 0.28);
  --line: rgba(14, 20, 32, 0.09);
  --line-strong: rgba(14, 20, 32, 0.17);
  --fg: #0e1218;
  --muted: #59606d;
  --accent: #c8325f;
  --accent-text: #a8264f;
  --accent-soft: rgba(200, 50, 95, 0.12);
  --cta: #c8325f;
  --cta-hover: #b02a52;
  --cta-ink: #ffffff;
  --heart: #d42a3a;
  --ok: #0f766e;
  --err: #c62828;
  --win-bg: #f3f5f8;
  --win-side: #ebeef3;
  --win-surface: #ffffff;
  --win-bar: #e3e6eb;
  --win-line: rgba(14, 20, 32, 0.09);
  --win-line-strong: rgba(14, 20, 32, 0.2);
  --win-fg: #0e1218;
  --win-muted: #59606d;
  --win-accent-text: #a8264f;
  --win-accent-soft: rgba(200, 50, 95, 0.12);
  --win-cta: #c8325f;
  --win-cta-hover: #b02a52;
  --win-cta-ink: #ffffff;
  --win-quiet: rgba(14, 20, 32, 0.07);
  --win-ring: rgba(200, 50, 95, 0.25);
  --win-bad: #c42b2b;
  --win-edge: rgba(14, 20, 32, 0.14);
  --win-shadow: 0 30px 60px -24px rgba(14, 20, 32, 0.3);
  --bub-in: #e9e9eb;
  --bub-in-ink: #0e1218;
  --bub-out: #007aff;
  --wa-bg: #efeae2;
  --wa-in: #ffffff;
  --wa-out: #d9fdd3;
  --wa-ink: #111b21;
  --wa-time: rgba(17, 27, 33, 0.5);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Paints the band behind a phone's status bar above the sticky nav. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--bg);
}

h1, h2, h3 { margin: 0; text-wrap: balance; font-synthesis: none; }
p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }
code { font: 0.9em var(--font-mono); }
button { font: inherit; }

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

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}

/* -- buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--cta);
  color: var(--cta-ink);
  font: 600 1rem/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.btn:hover { background: var(--cta-hover); }
.btn:active { transform: translateY(1px); }
.btn-small { height: 38px; padding: 0 16px; border-radius: 8px; font-size: 0.9375rem; }

.text-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.text-link:hover { text-decoration-color: currentColor; }
.btn-block { width: 100%; }

/* -- nav ------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 24px; height: 64px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 400 1.25rem/1 var(--font-display);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand .mark { width: 28px; height: 28px; flex: none; }

.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { color: var(--muted); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.nav-links a:hover { color: var(--fg); }

/* Light or dark. It shows the one in use, and hides without scripts, since then it
   can't do anything. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.theme-toggle:hover { color: var(--fg); background: var(--surface-2); }
.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .sun, :root[data-theme="light"] .theme-toggle .moon { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
:root:not([data-theme]) .theme-toggle { display: none; }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .theme-toggle { margin-left: auto; }
}

/* -- hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: center;
  gap: 56px;
  padding-block: 72px 88px;
}
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: 48px 64px; }
}

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 1.8rem + 3.6vw, 4.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.lede { margin-top: 22px; max-width: 34em; color: var(--muted); font-size: 1.1875rem; line-height: 1.55; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }

/* The download for this computer, and a menu with the other one (the script after them in
   index.html picks which is which). While the Windows version is coming soon, the Mac's is
   on its own, with a note beside it. */
.download { position: relative; display: inline-flex; }
.download .os { width: 18px; height: 18px; flex: none; fill: currentColor; }
.download-main { gap: 10px; padding-left: 20px; border-radius: 10px 0 0 10px; }
.download-main:only-child { border-radius: 10px; }
/* The Apple logo's leaf makes it look low beside the words. */
.download-main[data-os="mac"] .os { margin-top: -3px; }
.download-more { display: flex; }
.download-more summary {
  width: 46px;
  padding: 0;
  border-left-color: color-mix(in srgb, var(--cta-ink) 22%, transparent);
  border-radius: 0 10px 10px 0;
  list-style: none;
  cursor: pointer;
}
.download-more summary::-webkit-details-marker { display: none; }
.download-more[open] summary { background: var(--cta-hover); }
.download-more .chevron {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}
.download-more[open] .chevron { transform: rotate(180deg); }
.download-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 2;
  min-width: 100%;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--menu);
  box-shadow: var(--menu-shadow);
  animation: menu-in 0.16s ease-out;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.download-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 12px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
}
.download-menu a:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.download-menu a:focus-visible { outline-offset: -2px; }
.download-menu .os { width: 20px; height: 20px; }
.soon { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.9375rem; }
.soon .os { width: 16px; height: 16px; flex: none; fill: currentColor; }

.aside { max-width: 30em; margin-top: 28px; color: var(--muted); font-size: 0.9375rem; }

/* -- waitlist -------------------------------------------------------------- */

/* The waitlist, while the app has one (APP_WAITLIST in app.env, which site/build.sh
   reads). A phone has no room for the header's Join the waitlist beside the name, and the
   form's at the top of the page anyway. */
@media (max-width: 440px) { .nav-waitlist { display: none; } }

/* The waitlist form, in the hero. Without scripts it posts and comes back to one of its
   lines (#joined, #waitlist-error or #waitlist-down), which :target shows in place of the
   note; with them, waitlist.js sends it and says how it went in the note. */
.waitlist { display: grid; gap: 10px; max-width: 32rem; margin-top: 32px; }
.waitlist label { font-size: 0.9375rem; font-weight: 600; }
/* Side by side, or the button under the address and as wide when there's no room. */
.waitlist-row { display: flex; flex-wrap: wrap; gap: 10px; }
.waitlist input[type="email"] {
  flex: 999 1 15rem;
  min-width: 0;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg);
  font: 400 1rem/1 var(--font-body);
}
.waitlist input[type="email"]::placeholder { color: var(--muted); }
.waitlist input[type="email"]:focus { outline: 2px solid var(--cta); outline-offset: 1px; border-color: transparent; }
.waitlist .btn { flex: 1 0 auto; cursor: pointer; }
.waitlist .btn:disabled { opacity: 0.6; cursor: progress; }
.waitlist .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note, .joined { min-height: 1.4em; font-size: 0.9375rem; }
.form-note { color: var(--muted); }
.form-note.ok, .joined { color: var(--ok); }
.form-note.err, .joined.err { color: var(--err); }
.joined { display: none; }
.joined:target { display: block; }
.waitlist:has(.joined:target) .form-note { display: none; }



/* -- demo: a sketch of the app's window -------------------------------------- */

.demo { display: grid; gap: 22px; margin: 0; min-width: 0; }
@media (max-width: 980px) { .demo { max-width: 680px; } }

/* The window as the README's roadmap has it, in the --win- colours up top, light or dark with
   the page as the app will be with the Mac. The window is a size container, and the type
   inside is sized from its width (clamped, so it stays readable on a phone). Everything else
   is in em: pixels over its 14px type. */
.app {
  container-type: inline-size;
  max-width: 100%;
  border-radius: 12px;
  background: var(--win-bg);
  outline: 1px solid var(--win-edge);
  box-shadow: var(--win-shadow);
  overflow: hidden;
  color: var(--win-fg);
  font-family: var(--font-body);
  -webkit-user-select: none;
  user-select: none;
}
.app-frame { position: relative; font-size: clamp(11px, 2.05cqw, 14.5px); line-height: 1.35; }
.app svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app button { font: inherit; color: inherit; }
.app :focus-visible { outline-offset: 1px; }

.app-title {
  display: flex;
  align-items: center;
  gap: 0.9em;
  height: 2.7em;
  padding: 0 1em;
  background: var(--win-bar);
  border-bottom: 1px solid var(--win-line);
}
.lights { display: flex; gap: 0.55em; }
.lights i { width: 0.92em; height: 0.92em; border-radius: 50%; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.app-name { color: var(--win-muted); font-size: 0.9em; font-weight: 600; }

/* The views down the side, with the free trial and the backup that's open at the bottom;
   and the view that's picked beside them. */
.app-body { position: relative; display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); height: 34em; }

.app-side {
  display: flex;
  flex-direction: column;
  gap: 0.143em;
  min-height: 0;
  padding: 1em 0.857em;
  background: var(--win-side);
  border-right: 1px solid var(--win-line);
}
.side-link {
  display: flex;
  align-items: center;
  gap: 0.643em;
  width: 100%;
  padding: 0.5em 0.643em;
  border: 0;
  border-radius: 0.571em;
  background: transparent;
  color: var(--win-muted) !important;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.side-link svg { width: 1.357em; height: 1.357em; flex: none; }
.side-link:not(.on):hover { background: var(--win-quiet); color: var(--win-fg) !important; }
.side-link.on { background: var(--win-accent-soft); color: var(--win-accent-text) !important; }

/* The free trial at the bottom of the side: the time left, and Buy, which goes to the
   pricing below. */
.app-trial {
  display: grid;
  gap: 0.143em;
  margin-top: auto;
  padding: 0.714em 0.786em 0.786em;
  border: 1px solid var(--win-line);
  border-radius: 0.714em;
  background: var(--win-surface);
}
.app-trial strong { font-size: 0.893em; font-weight: 600; }
.app-trial span { color: var(--win-muted); font-size: 0.821em; }
.app-trial .app-btn { min-width: 0; margin-top: 0.56em; padding: 0.56em 0.8em; font-size: 0.893em; text-align: center; text-decoration: none; }

/* The backup that's open, under the free trial, beside the foot of the view (the window's
   .side-info): at least as tall as the foot and the gap above it, with the 0.571em more
   padding the view has at its bottom than the side, less the side's own 0.143em gap, so the
   free trial ends where a card above the foot would, as in the app. */
.side-info { display: grid; gap: 0.071em; align-content: end; min-height: calc(1.35em + 1.429em + 1em + 0.571em - 0.143em); padding: 0.571em 0.643em 0; }
.info-name { font-size: 0.857em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-line { color: var(--win-muted); font-size: 0.821em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The view: its name and what it shows, then what's in it, and the foot with its button. */
.app-main { display: flex; flex-direction: column; gap: 1em; min-width: 0; min-height: 0; padding: 1.429em 1.714em 1.571em; }

.app .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.143em; }
.app .head > div { min-width: 0; }
.app .title { display: flex; align-items: center; gap: 0.15em; font: 400 1.857em/1.1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
.app .status { margin-top: 0.286em; color: var(--win-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .back {
  display: grid;
  place-items: center;
  flex: none;
  width: 0.8em;
  height: 1em;
  margin-left: -0.25em;
  padding: 0;
  border: 0;
  border-radius: 0.2em;
  background: transparent;
  color: var(--win-accent-text);
  font-size: 1em;
  cursor: pointer;
}
.app .back svg { width: 0.62em; height: 0.62em; stroke-width: 2.6; }
.app .back:hover { background: var(--win-quiet); }

/* The search in Messages' and WhatsApp's lists. */
.app .search {
  display: flex;
  align-items: center;
  gap: 0.4em;
  flex: none;
  width: 11em;
  height: 2.143em;
  padding: 0 0.714em;
  border-radius: 0.571em;
  background: var(--win-quiet);
  color: var(--win-muted);
}
.app .search svg { width: 1.071em; height: 1.071em; flex: none; }
.app .search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--win-fg);
  font: inherit;
  font-size: 0.929em;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}
.app .search input::placeholder { color: var(--win-muted); }
.app .search:focus-within { box-shadow: 0 0 0 2px var(--win-ring); }

.app .scroll { flex: 1; min-height: 0; margin: 0 -0.3em; padding: 0.3em; overflow-y: auto; scrollbar-width: thin; }

.app .intro { margin: auto; max-width: 26em; color: var(--win-muted); text-align: center; line-height: 1.5; }
.app .intro b { display: block; margin-bottom: 0.286em; color: var(--win-fg); font: 400 1.5em/1.2 var(--font-display); }
.app .intro .app-btn { margin-top: 1em; }

/* The lists: the backups, the chats, the contacts and the calls, a row each. */
.app .rows { margin: 0; padding: 0; list-style: none; }
.app .rows > li + li { border-top: 1px solid var(--win-line); }
.app .row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.786em;
  width: 100%;
  padding: 0.571em 0.5em;
  border: 0;
  border-radius: 0.571em;
  background: transparent;
  text-align: left;
}
.app button.row { cursor: pointer; }
.app button.row:hover { background: var(--win-quiet); }
.app .row.on, .app .row.on:hover { background: var(--win-accent-soft); }
.app .rows > li:has(.row.on) + li, .app .rows > li:has(+ li .row.on) { border-color: transparent; }
.app .row-text { display: grid; min-width: 0; }
.app .row-name, .app .row-where { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .row-name { font-weight: 550; }
.app .row-where { color: var(--win-muted); font-size: 0.857em; }
.app .row-end { display: grid; justify-items: end; gap: 0.1em; color: var(--win-muted); font-size: 0.857em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app .row-end svg { width: 1.167em; height: 1.167em; }
.app .row .tag {
  padding: 0.05em 0.5em 0.1em;
  border-radius: 0.4em;
  background: var(--win-accent-soft);
  color: var(--win-accent-text);
  font-size: 0.833em;
  font-weight: 600;
}

/* A backup's phone. */
.app .device { display: grid; place-items: center; width: 2.429em; height: 2.429em; border-radius: 0.643em; background: var(--win-quiet); color: var(--win-muted); }
.app .device svg { width: 1.5em; height: 1.5em; }
.app .row.on .device { background: var(--win-surface); color: var(--win-accent-text); }

/* Someone's initials, in their colour, or the people in a group. */
.app .av {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.571em;
  height: 2.571em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-size: 0.929em;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.app .av svg { width: 1.4em; height: 1.4em; stroke-width: 1.8; }

/* A call: in, out or missed. */
.app .way { display: grid; place-items: center; width: 2.429em; height: 2.429em; border-radius: 50%; background: var(--win-quiet); color: var(--win-muted); }
.app .way svg { width: 1.214em; height: 1.214em; }
.app .way.missed { color: var(--win-bad); }
.app .row-name.missed { color: var(--win-bad); }

/* A thread, as it looks on the phone: Messages' blue and grey bubbles, each day under its
   date, with photos, voice notes and tapbacks in it. */
.app .thread { display: flex; flex-direction: column; gap: 0.214em; padding: 0 0.143em 0.286em; }
.app .day { margin: 0.714em 0 0.357em; color: var(--win-muted); font-size: 0.786em; font-weight: 500; text-align: center; }
.app .day:first-child { margin-top: 0.143em; }
.app .bub {
  position: relative;
  align-self: flex-start;
  max-width: 76%;
  padding: 0.429em 0.786em 0.5em;
  border-radius: 1.143em;
  background: var(--bub-in);
  color: var(--bub-in-ink);
  line-height: 1.32;
  overflow-wrap: anywhere;
}
.app .bub.me { align-self: flex-end; background: var(--bub-out); color: #fff; }
.app .bub.photo { width: 12em; padding: 0; overflow: hidden; }
.app .bub.photo .ph { display: block; aspect-ratio: 4 / 3; border-radius: 0; }
.app .bub.voice { display: flex; align-items: center; gap: 0.571em; }
.app .bub.voice svg { width: 1em; height: 1em; flex: none; fill: currentColor; stroke: none; }
.app .wave { display: flex; align-items: center; gap: 0.15em; height: 1.4em; }
.app .wave i { width: 0.2em; height: var(--h); border-radius: 0.1em; background: currentColor; opacity: 0.85; }
.app .len { font-size: 0.857em; font-variant-numeric: tabular-nums; opacity: 0.8; }
.app .tap {
  position: absolute;
  top: -0.786em;
  right: -0.571em;
  display: grid;
  place-items: center;
  width: 1.714em;
  height: 1.714em;
  border: 0.143em solid var(--win-bg);
  border-radius: 50%;
  background: var(--bub-in);
  color: #ff4f7b;
}
.app .bub.me .tap { right: auto; left: -0.571em; }
.app .tap svg { width: 0.857em; height: 0.857em; fill: currentColor; stroke: none; }
.app .who { margin: 0.429em 0 0 0.857em; color: var(--win-muted); font-size: 0.75em; }

/* WhatsApp's, on its own ground, with the time in each bubble and the sender's name in their
   colour in a group. */
.app .scroll.wa { margin: 0; padding: 0.571em 0.714em; border-radius: 0.714em; background: var(--wa-bg); }
.app .wa .bub { max-width: 80%; padding: 0.357em 0.571em 0.429em; border-radius: 0.571em; background: var(--wa-in); color: var(--wa-ink); box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13); }
.app .wa .bub.me { background: var(--wa-out); color: var(--wa-ink); }
.app .wa .bub.photo { width: 12.5em; padding: 0.214em; }
.app .wa .bub.photo .ph { border-radius: 0.429em; }
.app .wa .bub.photo .t { margin: 0.214em 0.214em 0 0.5em; }
.app .wa .from { display: block; margin-bottom: 0.071em; color: var(--c); font-size: 0.821em; font-weight: 650; }
.app .wa .bub.photo .from { margin: 0.143em 0.357em 0.214em; }
.app .wa .t { float: right; margin: 0.429em 0 -0.214em 0.714em; color: var(--wa-time); font-size: 0.714em; font-variant-numeric: tabular-nums; }
.app .wa .day { color: var(--wa-time); }
.app .wa .day span { padding: 0.214em 0.643em; border-radius: 0.5em; background: var(--wa-in); box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13); }

/* The Camera Roll: the photos, square, with those kept only in iCloud standing in for them.
   A click picks one to save. */
.app .grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.286em; }
.app .ph { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 0.286em; background: var(--win-quiet); }
.app .ph svg { display: block; width: 100%; height: 100%; fill: #000; stroke: none; }
.app .ph.cloud { display: grid; place-items: center; align-content: center; gap: 0.143em; color: var(--win-muted); font-size: 0.75em; font-weight: 600; }
.app .ph.cloud svg { width: 1.8em; height: 1.8em; fill: none; stroke: currentColor; stroke-width: 1.6; }
.app .shot { position: relative; display: block; min-width: 0; padding: 0; border: 0; border-radius: 0.286em; background: none; cursor: pointer; }
.app .shot:hover .ph svg { filter: brightness(1.08); }
.app .shot[aria-pressed="true"] .ph { outline: 2px solid var(--win-cta); outline-offset: -2px; }
.app .shot .tick {
  position: absolute;
  right: 0.357em;
  bottom: 0.357em;
  display: grid;
  place-items: center;
  width: 1.357em;
  height: 1.357em;
  border-radius: 50%;
  background: var(--win-cta);
  color: var(--win-cta-ink);
  opacity: 0;
}
.app .shot .tick svg { width: 1em; height: 1em; stroke-width: 2.4; }
.app .shot[aria-pressed="true"] .tick { opacity: 1; }
.app .vid { position: absolute; left: 0.357em; bottom: 0.286em; color: #fff; font-size: 0.75em; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }

.app .foot { display: flex; align-items: center; justify-content: space-between; gap: 1.143em; flex: none; }
.app .note { min-width: 0; color: var(--win-muted); font-size: 0.893em; }
.app .btns { display: flex; flex: none; gap: 0.571em; }
.app-btn {
  flex: none;
  min-width: 9.286em;
  padding: 0.714em 1.286em;
  border: 0;
  border-radius: 0.643em;
  background: var(--win-cta);
  color: var(--win-cta-ink) !important;
  font: inherit;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.app-btn:hover { background: var(--win-cta-hover); }
.app-btn:disabled { opacity: 0.55; cursor: default; background: var(--win-cta); }
.app-btn.quiet, .app-btn.quiet:hover { background: var(--win-quiet); color: var(--win-fg) !important; }
.app .btns .app-btn { min-width: 0; }

/* Over the window: unlocking a backup, saving a chat, and what was saved. */
.app .layer { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; padding: 1.714em; background: rgba(10, 12, 16, 0.4); }
.app .layer[hidden] { display: none; }
.app .card {
  display: flex;
  flex-direction: column;
  width: min(30em, 100%);
  max-height: 100%;
  border: 1px solid var(--win-line);
  border-radius: 1em;
  background: var(--win-surface);
  box-shadow: 0 1.43em 4.3em rgba(0, 0, 0, 0.25);
}
.app .card-head { display: grid; gap: 0.286em; padding: 1.429em 1.571em 0.857em; }
.app .card-head > svg { width: 2em; height: 2em; margin-bottom: 0.286em; color: var(--win-accent-text); }
.app .card-title { font: 400 1.5em/1.2 var(--font-display); }
.app .card-text { color: var(--win-muted); font-size: 0.893em; line-height: 1.45; }
.app .card-body { display: grid; gap: 0.714em; min-height: 0; padding: 0 1.571em 0.286em; overflow-y: auto; scrollbar-width: thin; }
.app .card-foot { display: flex; justify-content: flex-end; gap: 0.714em; padding: 1em 1.571em 1.286em; }
.app .card-foot .app-btn { min-width: 0; }
.app .card-foot .grow { flex: 1; }

/* The password: typed, never kept. */
.app .pw {
  width: 100%;
  height: 2.571em;
  padding: 0 0.857em;
  border: 1px solid var(--win-line-strong);
  border-radius: 0.643em;
  background: var(--win-bg);
  color: var(--win-fg);
  font: 500 1em/1 var(--font-mono);
  letter-spacing: 0.08em;
  -webkit-user-select: text;
  user-select: text;
}
.app .pw::placeholder { color: var(--win-muted); font-family: var(--font-body); letter-spacing: 0; }
.app .pw:focus { outline: none; border-color: var(--win-cta); box-shadow: 0 0 0 3px var(--win-ring); }

.app .progress { height: 0.5em; border-radius: 0.5em; background: var(--win-quiet); overflow: hidden; }
.app .progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--win-cta); transition: width 0.25s linear; }
.app .progress-text { color: var(--win-muted); font-size: 0.857em; font-variant-numeric: tabular-nums; }

/* Saving: what as, which messages, and with what. */
.app .opt { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: center; gap: 0.714em; padding-top: 0.714em; border-top: 1px solid var(--win-line); }
.app .opt-name { color: var(--win-muted); font-size: 0.893em; }
.app .seg { display: inline-flex; justify-self: start; max-width: 100%; padding: 0.15em; border-radius: 0.571em; background: var(--win-quiet); }
.app .seg button { padding: 0.3em 0.8em; border: 0; border-radius: 0.43em; background: transparent; color: var(--win-muted); font-size: 0.893em; font-weight: 600; white-space: nowrap; cursor: pointer; }
.app .seg button[aria-pressed="true"] { background: var(--win-surface); color: var(--win-fg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.app .check { display: flex; align-items: center; gap: 0.571em; padding: 0; border: 0; background: none; font-size: 0.929em; text-align: left; cursor: pointer; }
.app .check i { display: grid; place-items: center; flex: none; width: 1.286em; height: 1.286em; border: 1.5px solid var(--win-muted); border-radius: 0.357em; }
.app .check i svg { width: 1em; height: 1em; stroke: var(--win-cta-ink); stroke-width: 2.4; opacity: 0; }
.app .check[aria-pressed="true"] i { background: var(--win-cta); border-color: var(--win-cta); }
.app .check[aria-pressed="true"] i svg { opacity: 1; }

/* What was saved: a PDF's first page, as it prints, beside its name and what's in it. */
.app .saved {
  display: flex;
  gap: 1.429em;
  width: min(36em, 100%);
  max-height: 100%;
  padding: 1.286em;
  border: 1px solid var(--win-line);
  border-radius: 1em;
  background: var(--win-surface);
  box-shadow: 0 1.43em 4.3em rgba(0, 0, 0, 0.25);
}
.app .saved-info { display: flex; flex: 1; flex-direction: column; gap: 0.571em; min-width: 0; }
.app .saved-name { font: 400 1.286em/1.2 var(--font-display); overflow-wrap: anywhere; }
.app .saved-what { color: var(--win-muted); font-size: 0.893em; line-height: 1.45; }
.app .saved-note { min-height: 1.2em; color: var(--win-accent-text); font-size: 0.821em; }
.app .saved-info .btns { flex-wrap: wrap; margin-top: auto; }
.app .saved.wide { flex-direction: column; gap: 0.857em; width: min(30em, 100%); }
.app .saved.wide .btns { justify-content: flex-end; }

/* The page itself is paper whatever the theme, at half the window's type. */
.app .paper {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  width: 35.36em;
  height: 50em;
  padding: 2.4em 2.6em 4.2em;
  overflow: hidden;
  border-radius: 0.4em;
  background: #ffffff;
  color: #16181d;
  box-shadow: 0 0.4em 1.6em rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06);
  font-size: 0.5em;
  line-height: 1.35;
}
.app .pp-title { font: 400 2.2em/1.1 var(--font-display); }
.app .pp-sub { margin-top: 0.4em; padding-bottom: 1em; border-bottom: 1px solid #e3e5ea; color: #6b717c; }
.app .pp-rows { flex: 1; min-height: 0; overflow: hidden; }
.app .pp-msg { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 0 1em; padding: 0.75em 0; border-bottom: 1px solid #eef0f3; }
.app .pp-when { color: #6b717c; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app .pp-from { font-weight: 650; }
.app .pp-from.me { color: #a8264f; }
.app .pp-att { color: #6b717c; font-style: italic; }
.app .pp-pic { display: block; width: 11em; margin-top: 0.4em; aspect-ratio: 4 / 3; border-radius: 0.4em; overflow: hidden; }
.app .pp-pic svg { display: block; width: 100%; height: 100%; }
.app .pp-foot {
  position: absolute;
  inset: auto 2.6em 1.6em;
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding-top: 0.7em;
  border-top: 1px solid #e3e5ea;
  color: #6b717c;
  font-size: 0.9em;
}

/* What else was saved: files and folders, or the first rows of a CSV. */
.app .files { margin: 0; padding: 0; list-style: none; }
.app .files li { display: flex; align-items: center; gap: 0.643em; padding: 0.5em 0; border-top: 1px solid var(--win-line); }
.app .files svg { width: 1.357em; height: 1.357em; flex: none; color: var(--win-accent-text); }
.app .files span:last-child { margin-left: auto; color: var(--win-muted); font-size: 0.857em; white-space: nowrap; }
.app .files .file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .csv { width: 100%; border-collapse: collapse; font: 0.75em/1.35 var(--font-mono); table-layout: fixed; }
.app .csv th, .app .csv td { padding: 0.4em 0.5em; border: 1px solid var(--win-line); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .csv th { background: var(--win-quiet); font-weight: 600; }
.app .csv col.c-when { width: 9.5em; }
.app .csv col.c-from { width: 5em; }

/* The pointer that takes the window round while nobody's using it. Its tip is at the top
   left, where its circle shows a press. */
.app-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 1.6em;
  height: 1.6em;
  margin: -0.17em 0 0 -0.3em;
  opacity: 0;
  pointer-events: none;
  transition: translate 0.6s cubic-bezier(0.45, 0, 0.25, 1), opacity 0.3s;
}
.app-cursor.shown { opacity: 1; }
.app-cursor svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  fill: #ffffff;
  stroke: #15171b;
  stroke-width: 1.3;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
  transform-origin: 19% 10%;
  transition: scale 0.12s;
}
.app-cursor.pressing svg { scale: 0.88; }
.app-cursor::before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.17em;
  width: 2em;
  height: 2em;
  margin: -1em 0 0 -1em;
  border-radius: 50%;
  background: var(--win-cta);
  opacity: 0;
  scale: 0.3;
  transition: opacity 0.3s, scale 0.3s;
}
.app-cursor.pressing::before { opacity: 0.35; scale: 1; transition-duration: 0.12s; }

/* On a narrow window, as on a phone, the side keeps only its icons, the Camera Roll has
   four columns, and a saved PDF's page goes above its name. */
@container (max-width: 480px) {
  .app-body { grid-template-columns: auto minmax(0, 1fr); }
  .app-side { padding: 1em 0.5em; }
  .side-link { padding: 0.571em; }
  .side-name, .side-info, .app-trial { display: none; }
  .app-main { padding: 1.1em 1.1em 1.2em; }
  .app .search { width: 8em; }
  .app .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app .foot .note { display: none; }
  .app .foot { justify-content: flex-end; }
  .app .layer { padding: 1em; }
  .app .saved { flex-direction: column; align-items: center; gap: 0.857em; padding: 1em; }
  .app .paper { font-size: 0.4em; }
  .app .saved-info { align-self: stretch; flex: none; }
  .app .saved-what { display: none; }
  .app .opt { grid-template-columns: minmax(0, 1fr); gap: 0.429em; }
}

.demo-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  color: var(--muted);
  font-size: 0.9375rem;
}
.demo-hint { display: flex; align-items: center; gap: 8px; }
.demo-hint svg { width: 20px; height: 20px; flex: none; color: var(--accent-text); }
.demo-note { font-size: 0.875rem; opacity: 0.85; }

/* -- sections -------------------------------------------------------------- */

.band { padding-block: clamp(64px, 8vw, 104px); }
.band + .band { border-top: 1px solid var(--line); }

.section-head { display: grid; gap: 12px; max-width: 40rem; margin-bottom: clamp(32px, 4vw, 48px); }
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.section-head p { color: var(--muted); font-size: 1.125rem; }

h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.25; }

/* What's still to come once the app is out, such as Windows. */
.soon-pill {
  display: inline-block;
  margin: 0 4px 0 6px;
  padding: 1px 9px;
  border: 1px solid color-mix(in srgb, var(--cta) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cta) 16%, transparent);
  color: var(--fg);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 0.15em;
  white-space: nowrap;
}

/* chats and saving */

/* A reference list: picture, name and what it does, two columns wide. */
.ref-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 860px) { .ref-list { grid-template-columns: minmax(0, 1fr); } }

.ref {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-content: center;
  column-gap: 24px;
  row-gap: 4px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.ref > svg { grid-row: span 2; display: block; width: 100%; height: auto; }
.ref h3 { align-self: end; }
.ref p { align-self: start; color: var(--muted); font-size: 1rem; }
@media (max-width: 560px) {
  .ref { grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; padding: 14px 0; }
}

/* The pictures are drawn on a pad: neutral for what's in the backup, pink for what
   Bubbletin does with it. */
.g-pad { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.p-frame { fill: var(--line-strong); }
.p-ink { fill: var(--muted); opacity: 0.55; }
.p-ink-strong { fill: var(--muted); }
.p-pick { fill: var(--accent); }
.p-pick-soft { fill: var(--accent); opacity: 0.28; }
.p-pick-ink { fill: var(--surface-2); opacity: 0.8; }
.p-paper { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.p-dot { fill: var(--fg); }
.p-line { fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
.p-hair { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.p-shackle { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; opacity: 0.8; }
.p-ring { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 3 2.5; }
.p-trail { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0.5 6; opacity: 0.8; }

/* Where the pictures rest, which their runs end on. */
.k-row, .k-sel, .u-dot, .u-shackle, .u-open, .m-b, .w-row, .a-photo, .a-bar, .s-query, .s-hit,
.d-front, .d-line, .d-back, .t-row, .f-foot, .r-in, .r-all, .h-file, .c-row {
  transform-box: fill-box;
  transform-origin: center;
}
.s-query, .s-hit, .d-line, .c-row { transform-origin: left center; }
.m-b.in { transform-origin: left bottom; }
.m-b.out { transform-origin: right bottom; }
.h-file { transform-origin: center bottom; }

/* The pictures take turns acting out what they show: demo.js gives one at a time the
   "playing" class for a single run, and the rest stay still. */
.playing[data-motion="find"] .k-row { animation: bt-flash 2.4s ease-out both; }
.playing[data-motion="find"] .k-row:nth-of-type(2) { animation-delay: 0.15s; }
.playing[data-motion="find"] .k-row:nth-of-type(3) { animation-delay: 0.3s; }
.playing[data-motion="find"] .k-sel { animation: bt-choose 2.4s ease-in-out both; }
.playing[data-motion="unlock"] .u-dot { animation: bt-dot 1.4s linear both; }
.playing[data-motion="unlock"] .u-dot:nth-of-type(2) { animation-delay: 0.12s; }
.playing[data-motion="unlock"] .u-dot:nth-of-type(3) { animation-delay: 0.24s; }
.playing[data-motion="unlock"] .u-dot:nth-of-type(4) { animation-delay: 0.36s; }
.playing[data-motion="unlock"] .u-dot:nth-of-type(5) { animation-delay: 0.48s; }
.playing[data-motion="unlock"] .u-dot:nth-of-type(6) { animation-delay: 0.6s; }
.playing[data-motion="unlock"] .u-shackle { animation: bt-lift 2.4s ease-in-out both; }
.playing[data-motion="unlock"] .u-open { animation: bt-show 2.4s ease-in-out both; }
.playing[data-motion="bubbles"] .m-b { animation: bt-pop 1.6s ease-out both; }
.playing[data-motion="bubbles"] .m-b:nth-of-type(2) { animation-delay: 0.45s; }
.playing[data-motion="bubbles"] .m-b:nth-of-type(3) { animation-delay: 0.9s; }
.playing[data-motion="whatsapp"] .p-trail { animation: bt-flow 0.8s linear 3; }
.playing[data-motion="whatsapp"] .w-row { animation: bt-pop 1.6s ease-out both; }
.playing[data-motion="whatsapp"] .w-row:nth-of-type(2) { animation-delay: 0.3s; }
.playing[data-motion="whatsapp"] .w-row:nth-of-type(3) { animation-delay: 0.6s; }
.playing[data-motion="media"] .a-photo { animation: bt-pop 1.6s ease-out both; }
.playing[data-motion="media"] .a-bar { animation: bt-wave 0.6s ease-in-out 4 alternate; }
.playing[data-motion="media"] .a-bar:nth-of-type(2n) { animation-delay: 0.15s; }
.playing[data-motion="media"] .a-bar:nth-of-type(3n) { animation-delay: 0.3s; }
.playing[data-motion="search"] .s-query { animation: bt-type 2.4s ease-out both; }
.playing[data-motion="search"] .s-hit { animation: bt-mark 2.4s ease-in-out both; }
.playing[data-motion="pdf"] .d-front { animation: bt-print 2.4s ease-out both; }
.playing[data-motion="pdf"] .d-line { animation: bt-write 2.4s ease-out both; }
.playing[data-motion="pdf"] .d-line:nth-of-type(2) { animation-delay: 0.12s; }
.playing[data-motion="pdf"] .d-line:nth-of-type(3) { animation-delay: 0.24s; }
.playing[data-motion="pdf"] .d-line:nth-of-type(4) { animation-delay: 0.36s; }
.playing[data-motion="pdf"] .d-back { animation: bt-glow 2.4s ease-in-out; }
.playing[data-motion="stamp"] .t-row { animation: bt-in 1.6s ease-out both; }
.playing[data-motion="stamp"] .t-row:nth-of-type(2) { animation-delay: 0.35s; }
.playing[data-motion="stamp"] .t-row:nth-of-type(3) { animation-delay: 0.7s; }
.playing[data-motion="source"] .p-trail { animation: bt-flow 0.8s linear 3; }
.playing[data-motion="source"] .f-foot { animation: bt-pick 2.4s ease-in-out 0.6s both; }
.playing[data-motion="range"] .r-in { animation: bt-dot 1.4s linear both; }
.playing[data-motion="range"] .r-in:nth-of-type(2) { animation-delay: 0.15s; }
.playing[data-motion="range"] .r-in:nth-of-type(3) { animation-delay: 0.3s; }
.playing[data-motion="range"] .r-in:nth-of-type(4) { animation-delay: 0.45s; }
.playing[data-motion="range"] .r-all { animation: bt-whole 2.4s ease-in-out both; }
.playing[data-motion="html"] .h-file { animation: bt-rise 1.8s ease-out both; }
.playing[data-motion="html"] .h-file:nth-of-type(2) { animation-delay: 0.3s; }
.playing[data-motion="html"] .h-file:nth-of-type(3) { animation-delay: 0.6s; }
.playing[data-motion="csv"] .c-row { animation: bt-write 2s ease-out both; }
.playing[data-motion="csv"] .c-row:nth-of-type(2) { animation-delay: 0.2s; }
.playing[data-motion="csv"] .c-row:nth-of-type(3) { animation-delay: 0.4s; }
.playing[data-motion="csv"] .c-row:nth-of-type(4) { animation-delay: 0.6s; }

/* The backups come in one after another, then one is picked. */
@keyframes bt-flash {
  0% { opacity: 0.1; }
  12%, 100% { opacity: 1; }
}
@keyframes bt-choose {
  0%, 40% { opacity: 0; transform: none; }
  55% { opacity: 1; transform: scale(1.06); }
  70%, 100% { opacity: 1; transform: none; }
}
/* The password goes in a dot at a time, then the lock opens. */
@keyframes bt-dot {
  0% { opacity: 0; }
  10%, 100% { opacity: 1; }
}
@keyframes bt-lift {
  0%, 50% { transform: translateY(5px); }
  64%, 100% { transform: none; }
}
@keyframes bt-show {
  0%, 52% { opacity: 0; }
  66%, 100% { opacity: 1; }
}
/* Bubbles, chats and saved pages pop in. */
@keyframes bt-pop {
  0% { opacity: 0; transform: scale(0.6); }
  20%, 100% { opacity: 1; transform: none; }
}
@keyframes bt-flow { to { stroke-dashoffset: -6.5; } }
@keyframes bt-wave {
  from { transform: scaleY(0.4); }
  to { transform: none; }
}
/* A search is typed, and what it finds is marked. */
@keyframes bt-type {
  0%, 6% { transform: scaleX(0); }
  36%, 100% { transform: none; }
}
@keyframes bt-mark {
  0%, 42% { transform: scaleX(0); }
  62%, 100% { transform: none; }
}
/* A page comes out, and its lines are written. */
@keyframes bt-print {
  0% { transform: translateY(10px); opacity: 0; }
  28%, 100% { transform: none; opacity: 1; }
}
@keyframes bt-write {
  0%, 22% { transform: scaleX(0); }
  50%, 100% { transform: none; }
}
@keyframes bt-glow {
  0%, 30%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes bt-in {
  0% { opacity: 0; transform: translateX(-8px); }
  24%, 100% { opacity: 1; transform: none; }
}
@keyframes bt-pick {
  0%, 100% { transform: none; }
  18% { transform: scale(1.18); }
  34% { transform: none; }
}
@keyframes bt-whole {
  0%, 64% { opacity: 0; }
  74%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes bt-rise {
  0% { opacity: 0; transform: translateY(12px) scale(0.6); }
  30%, 100% { opacity: 1; transform: none; }
}

.legend { display: grid; gap: 8px; max-width: 46rem; margin-top: 28px; color: var(--muted); }

/* how it works */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  display: grid;
  align-content: start;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line-strong);
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  margin-bottom: 6px;
  font: 400 2.25rem/1 var(--font-display);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.steps p { color: var(--muted); }
@media (max-width: 820px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* details */

.details { columns: 2; column-gap: 56px; max-width: 64rem; }
@media (max-width: 760px) { .details { columns: 1; } }
.details p { margin-bottom: 20px; color: var(--muted); break-inside: avoid; }
.details b { color: var(--fg); font-weight: 600; }

/* privacy: the window asking for a backup's password, beside what stays where */

.split {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  align-items: start;
  gap: 32px 64px;
}
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

.sketch {
  max-width: 400px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--win-bg);
  outline: 1px solid var(--win-edge);
  box-shadow: var(--win-shadow);
  color: var(--win-fg);
  font-size: 0.875rem;
  line-height: 1.45;
}
.sketch .titlebar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; background: var(--win-bar); border-bottom: 1px solid var(--win-line); }
.sketch .titlebar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.sketch .titlebar i:nth-child(2) { background: #febc2e; }
.sketch .titlebar i:nth-child(3) { background: #28c840; }
.sketch .titlebar span { margin-left: 8px; color: var(--win-muted); font-size: 0.8125rem; font-weight: 600; }
.sketch-body { display: grid; justify-items: center; gap: 12px; padding: 28px 32px 30px; color: var(--win-muted); text-align: center; }
.sketch-body svg { width: 40px; height: 40px; fill: none; stroke: var(--win-accent-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sketch-title { color: var(--win-fg); font: 400 1.375rem/1.2 var(--font-display); }
.sketch-field {
  width: 100%;
  margin-top: 4px;
  padding: 9px 12px;
  border: 1px solid var(--win-cta);
  border-radius: 9px;
  background: var(--win-bg);
  box-shadow: 0 0 0 3px var(--win-ring);
  color: var(--win-fg);
  font: 500 0.9375rem/1.2 var(--font-mono);
  letter-spacing: 0.12em;
  text-align: left;
}
.sketch-btn { justify-self: stretch; padding: 9px 24px; border-radius: 9px; background: var(--win-cta); color: var(--win-cta-ink); font-weight: 650; }
.sketch-note { font-size: 0.8125rem; }

.notes-list { max-width: 40rem; }
.notes-list p { margin-bottom: 16px; color: var(--muted); }
.notes-list b { color: var(--fg); font-weight: 600; }

/* pricing */

.pricing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 48px 72px; }
.pricing-copy { display: grid; gap: 16px; max-width: 32rem; min-width: 0; }
.pricing-copy p { color: var(--muted); font-size: 1.125rem; }
@media (max-width: 860px) { .pricing { grid-template-columns: minmax(0, 1fr); } }

.price-card {
  display: grid;
  gap: 18px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
.plan { font-weight: 600; color: var(--muted); }
.price { display: flex; align-items: baseline; gap: 12px; }
.amount {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
}
.per { color: var(--muted); font-size: 1rem; }
.includes { margin-bottom: 6px; }
.req { color: var(--muted); font-size: 0.875rem; text-align: center; }
.req + .req { margin-top: -10px; }
.req a { color: var(--fg); }
.trial { margin-top: -6px; color: var(--muted); font-size: 0.9375rem; text-align: center; }
.trial a { color: var(--fg); }

/* faq */

.faq { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px 72px; align-items: start; }
@media (max-width: 860px) { .faq { grid-template-columns: minmax(0, 1fr); } }
.faq-list { display: grid; gap: 28px; margin: 0; }
.faq dt { font-weight: 600; }
.faq dd { max-width: 40rem; margin: 6px 0 0; color: var(--muted); }
.faq dd a { color: var(--fg); text-underline-offset: 3px; }

/* license agreement (terms.html) and privacy policy (privacy.html). overflow-wrap breaks a
   long path, such as the log's on Windows, on a phone. */
.legal { max-width: 44rem; overflow-wrap: break-word; }
.legal h1 { font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem); }
.legal-date { margin-top: 14px; color: var(--muted); }
.legal h2 { margin-top: 40px; font-family: var(--font-body); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.legal p, .legal ol, .legal ul { margin: 12px 0 0; }
.legal ol, .legal ul { display: grid; gap: 6px; padding-left: 1.5em; }
.legal a { text-underline-offset: 3px; }

/* The page for an address the site doesn't have (404.html), which fills the window down to the
   footer however short it is. */
body:has(.not-found) { display: flex; flex-direction: column; min-height: 100svh; }
.not-found { flex: 1; }

/* footer */

.footer { border-top: 1px solid var(--line); background: var(--bg-raised); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-block: 36px; color: var(--muted); font-size: 0.9375rem; }
.footer .brand { color: var(--fg); margin-right: auto; }
.footer a:not(.brand) { color: var(--fg); text-underline-offset: 3px; }
.fine { width: 100%; font-size: 0.8125rem; }
.heart { color: var(--heart); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .ref > svg * { animation: none !important; }
}