/* Layout: one long page; a hero with the downloads, or the waitlist until the app's
   out, beside the app's window with its tools working, 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 with the button in the
   header (data-theme, set by the script in index.html's head). Sections are set
   like a manual: hairlines and run-in heads rather than cards. The look is
   Glidemote's, with copper in place of its blue. */

/* The fonts, from fonts/ on this site rather than from Google Fonts, so a visit reaches
   no one else. They're Google Fonts' Latin subsets, as the pages used to load them
   (fonts/OFL.txt is their licence), and Bootstrapp's site/fonts/. */

: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;

  /* Copper, the colour of a new penny. */
  --accent: #e8945a;
  --accent-text: #f2b184;
  --accent-soft: rgba(232, 148, 90, 0.16);
  --cta: #e38a4e;
  --cta-hover: #f0a46e;
  --cta-ink: #1a1008;
  --heart: #f2626b;
  --ok: #5eead4;
  --err: #ff8a80;

  /* The app's window, in the hero: its colours on a dark Mac or PC (app/static/window.html),
     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: #f2b184;
  --win-accent-soft: rgba(232, 148, 90, 0.14);
  --win-cta: #e38a4e;
  --win-cta-hover: #f0a46e;
  --win-cta-ink: #1a1008;
  --win-quiet: rgba(255, 255, 255, 0.1);
  --win-tick-ink: #15171b;
  --win-tint: 0.3;
  --win-edge: rgba(255, 255, 255, 0.12);
  --win-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);

  --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: #b4561f;
    --accent-text: #9a4a1a;
    --accent-soft: rgba(180, 86, 31, 0.12);
    --cta: #a9501b;
    --cta-hover: #9c4a18;
    --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: #9a4a1a;
    --win-accent-soft: rgba(180, 86, 31, 0.12);
    --win-cta: #c4652a;
    --win-cta-hover: #b4561f;
    --win-cta-ink: #ffffff;
    --win-quiet: rgba(14, 20, 32, 0.07);
    --win-tick-ink: #ffffff;
    --win-tint: 0.34;
    --win-edge: rgba(14, 20, 32, 0.14);
    --win-shadow: 0 30px 60px -24px rgba(14, 20, 32, 0.3);
  }
}
: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: #b4561f;
  --accent-text: #9a4a1a;
  --accent-soft: rgba(180, 86, 31, 0.12);
  --cta: #a9501b;
  --cta-hover: #9c4a18;
  --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: #9a4a1a;
  --win-accent-soft: rgba(180, 86, 31, 0.12);
  --win-cta: #c4652a;
  --win-cta-hover: #b4561f;
  --win-cta-ink: #ffffff;
  --win-quiet: rgba(14, 20, 32, 0.07);
  --win-tick-ink: #ffffff;
  --win-tint: 0.34;
  --win-edge: rgba(14, 20, 32, 0.14);
  --win-shadow: 0 30px 60px -24px rgba(14, 20, 32, 0.3);
}

* { 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: the app's window ------------------------------------------------ */

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

/* The app's window as app/static/window.html draws it, in its colours (the --win- ones up
   top), light or dark with the page as the app is with the computer. 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: the app's 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 :focus-visible { outline-offset: 1px; }

.app-title {
  position: relative;
  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; }
.win-ctl { display: none; margin-left: auto; align-self: stretch; }
.win-ctl i { position: relative; width: 3.3em; }
.win-ctl i::before, .win-ctl i::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.win-ctl .min::before { width: 0.8em; height: 1px; background: var(--win-muted); }
.win-ctl .max::before { width: 0.7em; height: 0.7em; border: 1px solid var(--win-muted); border-radius: 1px; }
.win-ctl .close::before, .win-ctl .close::after { width: 0.95em; height: 1px; background: var(--win-muted); rotate: 45deg; }
.win-ctl .close::after { rotate: -45deg; }
[data-os="win"] .lights { display: none; }
[data-os="win"] .win-ctl { display: flex; margin-right: -1em; }
[data-os="win"] .app-title { padding-left: 1.1em; }

/* The tools down the side, with the disk and the free trial at the bottom, and the tool
   picked beside them, as tall as the app's window is for its width. */
.app-body { position: relative; display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); height: 34em; }

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

.disk { display: grid; gap: 0.429em; margin-top: auto; padding: 0.857em 0.643em 0.143em; }
.disk-name { font-size: 0.857em; font-weight: 600; }
.disk-bar { height: 0.429em; border-radius: 1em; background: var(--win-quiet); overflow: hidden; }
.disk-bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: #9aa1ab; }
.disk-free { color: var(--win-muted); font-size: 0.821em; font-variant-numeric: tabular-nums; }
.disk-trash { margin-top: -0.26em; }

/* The free trial, under the disk: the time left, and Buy, which goes to the pricing below. */
.app-trial {
  display: grid;
  gap: 0.143em;
  margin-top: 0.857em;
  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 tool picked: its name, what it's doing and its total; the bar; what it found, or the
   big words in the middle; and the note and the button at the foot. */
.app-main { display: flex; flex-direction: column; gap: 1em; min-width: 0; min-height: 0; padding: 1.429em 1.714em 1.571em; }
.app .view { display: contents; }

.app .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.143em; }
.app .head > div { min-width: 0; }
.app .title { font: 400 1.857em/1.1 var(--font-display); letter-spacing: -0.01em; }
.app .status { margin-top: 0.286em; color: var(--win-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .total { flex: none; font-size: 2em; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.app .total.none { color: var(--win-muted); }

.app .bar { display: flex; gap: 2px; flex: none; height: 0.571em; border-radius: 0.571em; background: var(--win-quiet); overflow: hidden; }
.app .bar i { flex: none; background: var(--c); }
.app .bar i.sweep { width: 30%; border-radius: 0.571em; background: var(--win-cta); }
.app .bar i.done { background: var(--win-cta); border-radius: 0.571em; }

.app .intro { margin: auto; max-width: 28.6em; 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 .rows { flex: 1; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-width: thin; }
.app .rows > li { border-top: 1px solid var(--win-line); }
.app .rows > li:last-child { border-bottom: 1px solid var(--win-line); }
.app .row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.857em; padding: 0.643em 0.143em; }
.app .tick {
  display: grid;
  place-items: center;
  width: 1.286em;
  height: 1.286em;
  padding: 0;
  border: 1.5px solid var(--win-muted);
  border-radius: 0.357em;
  background: transparent;
  cursor: pointer;
}
.app .tick svg { width: 1em; height: 1em; stroke: var(--win-tick-ink); stroke-width: 2.2; opacity: 0; }
.app .tick[aria-pressed="true"], .app .tick[aria-pressed="mixed"] { background: var(--c); border-color: var(--c); }
.app .tick[aria-pressed="true"] svg, .app .tick[aria-pressed="mixed"] svg { opacity: 1; }
.app .tick:disabled { cursor: default; }
.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-size { font-variant-numeric: tabular-nums; }
.app .row .tick[aria-pressed="false"] ~ .row-size { color: var(--win-muted); }
.app .more { display: grid; place-items: center; width: 1.857em; height: 1.857em; padding: 0; border: 0; border-radius: 0.429em; background: transparent; color: var(--win-muted); cursor: pointer; }
.app .more:hover { background: var(--win-quiet); }
.app .more svg { width: 1.071em; height: 1.071em; transition: rotate 0.15s; }
.app .open .more svg { rotate: 90deg; }
.app .rows > li:not(.open) .paths { display: none; }
/* What's in a group, at 12px. */
.app .paths { margin: 0 0 0.571em 2.143em; padding: 0; list-style: none; }
.app .paths li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.833em; padding: 0.167em 0.333em 0.167em 0; font-size: 0.857em; }
.app .paths .tick { width: 1.167em; height: 1.167em; border-radius: 0.333em; }
.app .paths .tick svg { width: 0.917em; height: 0.917em; }
.app .paths .path { min-width: 0; color: var(--win-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; }
.app .paths .size { font-variant-numeric: tabular-nums; }
.app .paths li.off .size { color: var(--win-muted); }
/* Each copy of a file, with when it last changed and what it frees or that it stays; and each
   thing that goes with an app, with what it is and the room it takes. */
.app .copies li, .app .kept li { grid-template-columns: auto minmax(0, 1fr) auto 5.167em; }
.app .copies .when, .app .kept .kind { color: var(--win-muted); font-variant-numeric: tabular-nums; }
.app .copies .size, .app .kept .size { text-align: right; }
.app .copies li.off .size { color: var(--win-accent-text); }
.app .copies .tick.last { opacity: 0.4; }

.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-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);
  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); }

/* Large files and the Uninstaller: what each is, when it was last opened and the room it
   takes, under headings that sort them. */
.app .columns { display: grid; align-items: center; gap: 0.857em; flex: none; margin-bottom: -0.714em; padding: 0 0.143em 0.429em; color: var(--win-muted); }
.app .columns > * { font-size: 0.857em; }
.app .columns button { justify-self: end; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 0.857em; cursor: pointer; }
.app .columns button:hover { color: var(--win-fg); }
.app .columns button[aria-pressed="true"] { color: var(--win-fg); font-weight: 600; }
.app .columns button:first-of-type { justify-self: start; }
.app-main[data-tool="large"] :is(.columns, .row) { grid-template-columns: 1.286em minmax(0, 1fr) 7.429em 5.143em; }
.app-main[data-tool="apps"] :is(.columns, .row) { grid-template-columns: 1.286em minmax(0, 1fr) 6.857em 5.714em 1.857em; }
.app-main:is([data-tool="large"], [data-tool="apps"]) .row-size { text-align: right; }
.app .row-when { color: var(--win-muted); font-size: 0.893em; font-variant-numeric: tabular-nums; }
.app .row-when.guess { opacity: 0.7; }
.app .row-where.open-now { color: var(--win-accent-text); }
.app .row-size small { display: block; color: var(--win-muted); font-size: 0.821em; white-space: nowrap; }

/* Startup items: what opens at login, then the helpers apps add, under a heading each, with
   whether each is running and a switch. */
.app-main[data-tool="startup"] .row { grid-template-columns: minmax(0, 1fr) auto 2.429em; }
.app .rows > li.section { padding: 1.167em 0.167em 0.5em; color: var(--win-muted); font-size: 0.857em; font-weight: 600; }
.app .rows > li.section:first-child { padding-top: 0.167em; border-top: 0; }
.app .row-where.gone { color: var(--win-accent-text); }
.app-main[data-tool="startup"] .off .row-name { color: var(--win-muted); font-weight: 500; }
.app .switch {
  position: relative;
  width: 2.429em;
  height: 1.429em;
  padding: 0;
  border: 0;
  border-radius: 0.714em;
  background: var(--win-line-strong);
  cursor: pointer;
  transition: background 0.15s;
}
.app .switch::after {
  content: "";
  position: absolute;
  top: 0.143em;
  left: 0.143em;
  width: 1.143em;
  height: 1.143em;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.app .switch[aria-checked="true"] { background: var(--win-cta); }
.app .switch[aria-checked="true"]::after { transform: translateX(1em); }
.app .switch:disabled { opacity: 0.5; cursor: default; }

/* The Disk map: blocks sized by what they hold. Folders have a colour each, and the rest is
   grey; what's too small to show one by one is a paler grey. */
.app .map { position: relative; flex: 1; min-height: 0; }
.app .block {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0.429em 0.571em;
  border: 0;
  border-radius: 0.429em;
  overflow: hidden;
  background: var(--win-surface);
  color: var(--win-fg);
  font: inherit;
  text-align: left;
  cursor: default;
}
.app .block::before { content: ""; position: absolute; inset: 0; background: var(--c); opacity: var(--win-tint); transition: opacity 0.12s; }
.app .block:hover::before, .app .block.hover::before { opacity: calc(var(--win-tint) + 0.16); }
.app .block > span { position: relative; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .block-name { font-size: 0.893em; font-weight: 600; }
.app .block-size { color: var(--win-muted); font-size: 0.821em; font-variant-numeric: tabular-nums; }
.app .block:empty { padding: 0; }
.app .block.opens { cursor: pointer; }
.app .block.small { --win-tint: 0.16; }
.app .block.small .block-name { color: var(--win-muted); font-weight: 500; }
/* Too short for two lines: its size goes after its name. */
.app .block.short { flex-direction: row; align-items: baseline; gap: 0.571em; }
.app .block.short .block-name { flex: none; max-width: 70%; }
.app .status .crumb { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.app .status .crumb:hover { color: var(--win-fg); text-decoration: underline; }
.app .status .here { color: var(--win-fg); }

/* Asking before anything goes, over the window as the app's dialog is: what's ticked, group by
   group. */
.app .confirm { 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.35); }
.app .confirm[hidden] { display: none; }
.app .confirm-card {
  display: flex;
  flex-direction: column;
  width: min(37.14em, 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 .confirm-head { padding: 1.429em 1.571em 0.857em; }
.app .confirm-title { margin-bottom: 0.19em; font: 400 1.5em/1.2 var(--font-display); }
.app .confirm-text { color: var(--win-muted); font-size: 0.893em; line-height: 1.45; }
.app .confirm-list { flex: 1; min-height: 0; margin: 0; padding: 0 1.571em; overflow-y: auto; list-style: none; scrollbar-width: thin; }
.app .confirm-list > li { padding: 0.643em 0; border-top: 1px solid var(--win-line); }
.app .confirm-group { display: flex; align-items: center; gap: 0.643em; font-weight: 550; }
.app .confirm-group i { flex: none; width: 0.643em; height: 0.643em; border-radius: 0.214em; background: var(--c); }
.app .confirm-group span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; }
.app .confirm-list .paths { display: block; margin: 0.286em 0 0 1.286em; }
.app .confirm-list .paths li { grid-template-columns: minmax(0, 1fr) auto; }
.app .confirm-foot { display: flex; justify-content: flex-end; gap: 0.714em; padding: 1em 1.571em 1.286em; border-top: 1px solid var(--win-line); }
.app .confirm-foot .app-btn { min-width: 0; }

/* The pointer that takes the window round its tools 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 the tools' icons, and the lists lose
   their dates. */
@container (max-width: 480px) {
  .app-body { grid-template-columns: auto minmax(0, 1fr); }
  .app-side { padding: 1em 0.5em; }
  .tool-link { padding: 0.571em; }
  .tool-name, .disk, .app-trial { display: none; }
  .app-main { padding: 1.1em 1.1em 1.2em; }
  .app .total { font-size: 1.6em; }
  .app-main[data-tool="large"] :is(.columns, .row) { grid-template-columns: 1.286em minmax(0, 1fr) 5.143em; }
  .app-main[data-tool="apps"] :is(.columns, .row) { grid-template-columns: 1.286em minmax(0, 1fr) 5.714em 1.857em; }
  .app-main:is([data-tool="large"], [data-tool="apps"]) .row-when, .app .columns [data-sort="opened"] { display: none; }
  .app .copies li, .app .kept li { grid-template-columns: auto minmax(0, 1fr) 5.167em; }
  .app .copies .when, .app .kept .kind { display: none; }
}

.demo-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 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); }

/* Mac or Windows, for the window above. */
.os-switch { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); }
.os-switch button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.os-switch button:hover { color: var(--fg); }
.os-switch button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
:root:not([data-theme]) .os-switch { display: none; }

/* -- 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; }

/* tools */

/* 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 tool pictures are drawn on the same pad as Glidemote's gestures: neutral
   shapes for what's there, copper for what the tool finds. */
.g-pad { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.t-base, .t-block, .t-label, .t-file, .t-page { fill: var(--line-strong); }
.t-used { fill: var(--muted); opacity: 0.55; }
.t-junk, .t-big, .t-top, .t-app, .t-copy .t-page { fill: var(--accent); }
.t-bar { fill: var(--muted); opacity: 0.55; }
.t-top { opacity: 1; }
.t-split { fill: none; stroke: var(--surface-2); stroke-width: 2; }
.t-sweep { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.t-page { stroke: none; }
.t-lines { fill: none; stroke: var(--surface-2); stroke-width: 2.4; stroke-linecap: round; }
.t-copy .t-lines { stroke: var(--surface-2); }
.t-equal { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.t-trail { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0.5 6; opacity: 0.8; }
.t-chip { fill: var(--accent); opacity: 0.55; }
.t-track { fill: var(--accent); }
.t-knob { fill: #fff; }

/* The pictures take turns acting out their tool: demo.js gives one at a time the
   "playing" class for a single run, and the rest stay still. */
.tool svg * { transform-box: fill-box; transform-origin: left center; }
.t-copy, .t-app, .t-chip, .t-big { transform-origin: center; }

.playing[data-motion="sweep"] .t-junk { animation: t-shrink 2.4s ease-in-out; }
.playing[data-motion="sweep"] .t-junk:nth-of-type(9) { animation-delay: 0.12s; }
.playing[data-motion="sweep"] .t-junk:nth-of-type(10) { animation-delay: 0.24s; }
.playing[data-motion="sweep"] .t-sweep { animation: t-sweep 2.4s ease-in-out; }
.playing[data-motion="map"] .t-big { animation: t-pulse 2.4s ease-in-out; }
.playing[data-motion="sort"] .t-bar { animation: t-grow 2.4s ease-out; }
.playing[data-motion="sort"] .t-bar:nth-of-type(3) { animation-delay: 0.1s; }
.playing[data-motion="sort"] .t-bar:nth-of-type(4) { animation-delay: 0.2s; }
.playing[data-motion="dupe"] .t-copy { animation: t-lift 2.4s ease-in-out; }
.playing[data-motion="remove"] .t-app, .playing[data-motion="remove"] .t-chip { animation: t-vanish 2.4s ease-in-out; }
.playing[data-motion="remove"] .t-chip.c1 { animation-delay: 0.08s; }
.playing[data-motion="remove"] .t-chip.c2 { animation-delay: 0.16s; }
.playing[data-motion="remove"] .t-chip.c3 { animation-delay: 0.12s; }
.playing[data-motion="remove"] .t-chip.c4 { animation-delay: 0.2s; }
.playing[data-motion="remove"] .t-trail { animation: t-flow 0.8s linear 3; }
.playing[data-motion="toggle"] .s1 .t-knob, .playing[data-motion="toggle"] .s3 .t-knob { animation: t-knob 2.4s ease-in-out; }
.playing[data-motion="toggle"] .s1 .t-track, .playing[data-motion="toggle"] .s3 .t-track { animation: t-off 2.4s ease-in-out; }
.playing[data-motion="toggle"] .s3 * { animation-delay: 0.3s !important; }

/* The copper part of each bar is cleared as the line passes, then comes back. */
@keyframes t-shrink {
  0%, 18% { transform: none; opacity: 1; }
  48%, 74% { transform: scaleX(0.12); opacity: 0; }
  92%, 100% { transform: none; opacity: 1; }
}
@keyframes t-sweep {
  0%, 8% { transform: translateX(-74px); opacity: 0; }
  14% { opacity: 1; }
  50% { transform: none; opacity: 1; }
  58%, 100% { transform: none; opacity: 0; }
}
/* The biggest block brightens and splits into what's inside it. */
@keyframes t-pulse {
  0%, 10%, 90%, 100% { opacity: 1; }
  30%, 70% { opacity: 0.7; }
}
@keyframes t-grow {
  0% { transform: scaleX(0); }
  50%, 100% { transform: none; }
}
/* The copy lifts away to the Trash, then is put back. */
@keyframes t-lift {
  0%, 12% { transform: none; opacity: 1; }
  45%, 72% { transform: translate(10px, -6px) scale(0.6); opacity: 0; }
  92%, 100% { transform: none; opacity: 1; }
}
@keyframes t-vanish {
  0%, 12% { transform: none; opacity: var(--o, 1); }
  42%, 72% { transform: scale(0.3); opacity: 0; }
  92%, 100% { transform: none; opacity: var(--o, 1); }
}
.t-chip { --o: 0.55; }
@keyframes t-flow { to { stroke-dashoffset: -6.5; } }
@keyframes t-knob {
  0%, 16% { transform: none; }
  32%, 76% { transform: translateX(-10px); }
  92%, 100% { transform: none; }
}
@keyframes t-off {
  0%, 16% { fill: var(--accent); }
  32%, 76% { fill: var(--line-strong); }
  92%, 100% { fill: var(--accent); }
}

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

/* 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; }
}

/* safety */

.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; }

/* 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); } }

.compare { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 0.9375rem; }
.compare caption { padding-bottom: 8px; color: var(--muted); font-size: 0.875rem; text-align: left; }
.compare th, .compare td { padding: 10px 12px 10px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.compare tr:last-child > * { border-bottom: 1px solid var(--line); }
.compare th { font-weight: 600; }
.compare td { color: var(--muted); }
.compare td:last-child { padding-right: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compare .us td:last-child { color: var(--accent-text); font-weight: 600; }
@media (max-width: 420px) { .compare td:nth-child(2) { display: none; } }

.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 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; }

/* 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; }
  .tool * { animation: none !important; }
}