/* getfindy.xyz. Light or dark with the system, with the app's colours as accents: each shelf and collection
   keeps its tint. The drawn Findy windows follow too, like the app in dark mode. */
:root {
  color-scheme: light dark;
  --bg: #fbfaff;
  --surface: #ffffff;
  --ink: #17151f;
  --ink-2: #5e5a6e;
  --ink-3: #8f8b9e;
  --line: rgba(var(--ink-rgb), 0.09);
  --accent: #5b4cf0;
  --accent-2: #8c6cff;
  /* macOS system colours, as SwiftUI draws them in Findy. */
  --blue: #007aff;
  --purple: #af52de;
  --pink: #ff2d55;
  --orange: #ff9500;
  --yellow: #ffcc00;
  --green: #34c759;
  --teal: #30b0c7;
  --brown: #a2845e;
  --indigo: #5856d6;
  --red: #ff3b30;
  /* Fills and lines are ink at low opacity; in dark they turn white. */
  --ink-rgb: 23, 21, 31;
  --chrome: #fcfcfd;
  --sidebar: #f6f5f9;
  --mix: #ffffff;
  --nav: rgba(251, 250, 255, 0.82);
  --privacy: #17151f;
  --thumb-a: #ffffff;
  --thumb-b: #f3f2f7;
  --zip-a: #fbf8f3;
  --zip-b: #efe8dc;
  --folder-face: rgba(255, 255, 255, 0.5);
  --folder-edge: rgba(255, 255, 255, 0.8);
  /* The made-up desktop: menu bar, windows, Quick Search glass, Dock, keycaps. */
  --wall-dim: transparent;
  --bar: rgba(255, 255, 255, 0.38);
  --bar-ink: #1d1d1f;
  --pane: rgba(255, 255, 255, 0.78);
  --pane-solid: rgba(255, 255, 255, 0.95);
  --pane-side: rgba(240, 240, 245, 0.9);
  --glass: rgba(245, 245, 249, 0.86);
  --glass-edge: rgba(255, 255, 255, 0.7);
  --dock: rgba(255, 255, 255, 0.34);
  --dock-edge: rgba(255, 255, 255, 0.45);
  --key: rgba(255, 255, 255, 0.92);
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 18px;
}

/* Dark: macOS dark system colours (as SwiftUI draws them in Findy's dark appearance) and darker glass. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111017;
    --surface: #1c1a24;
    --ink: #f4f3f8;
    --ink-2: #b4b0c3;
    --ink-3: #85819a;
    --line: rgba(255, 255, 255, 0.1);
    --accent: #6f60ff;
    --accent-2: #9a82ff;
    --blue: #0a84ff;
    --purple: #bf5af2;
    --pink: #ff375f;
    --orange: #ff9f0a;
    --yellow: #ffd60a;
    --green: #30d158;
    --teal: #40c8e0;
    --brown: #ac8e68;
    --indigo: #5e5ce6;
    --red: #ff453a;
    --ink-rgb: 255, 255, 255;
    --chrome: #22202b;
    --sidebar: #1f1d28;
    --mix: #1c1a24;
    --nav: rgba(17, 16, 23, 0.8);
    --privacy: #09080d;
    --thumb-a: #2b2934;
    --thumb-b: #24222c;
    --zip-a: #2e2b27;
    --zip-b: #27241f;
    --folder-face: rgba(255, 255, 255, 0.04);
    --folder-edge: rgba(255, 255, 255, 0.09);
    --wall-dim: rgba(12, 10, 24, 0.38);
    --bar: rgba(22, 20, 30, 0.45);
    --bar-ink: #f2f1f7;
    --pane: rgba(34, 32, 43, 0.88);
    --pane-solid: rgba(30, 28, 38, 0.97);
    --pane-side: rgba(44, 42, 54, 0.92);
    --glass: rgba(38, 36, 48, 0.88);
    --glass-edge: rgba(255, 255, 255, 0.12);
    --dock: rgba(28, 26, 38, 0.4);
    --dock-edge: rgba(255, 255, 255, 0.14);
    --key: rgba(46, 44, 58, 0.96);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
q { quotes: "“" "”"; }
h1, h2, h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
kbd { font: 600 0.82em/1 -apple-system, sans-serif; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 3px 6px; background: var(--surface); margin: 0 1px; }
.fine { font-size: 14px; color: var(--ink-3); }

/* Icons: one stroke drawing per class, coloured by currentColor. */
.ic { display: inline-block; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic.home { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.ic.recents { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ic.images { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E"); }
.ic.videos { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M7.5 4v16M16.5 4v16M3 9h4.5M3 15h4.5M16.5 9H21M16.5 15H21'/%3E%3C/svg%3E"); }
.ic.music { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E"); }
.ic.documents { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8zM14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.ic.archives { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='5' rx='1'/%3E%3Cpath d='M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4'/%3E%3C/svg%3E"); }
.ic.apps { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E"); }
.ic.shots { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ic.large { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='13' width='18' height='7' rx='2'/%3E%3Cpath d='m5 13 2-8h10l2 8'/%3E%3C/svg%3E"); }
.ic.downloads { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v8.5M8 12.5l4 4 4-4'/%3E%3C/svg%3E"); }
.ic.cleanup { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='m11 3 1.9 5.1L18 10l-5.1 1.9L11 17l-1.9-5.1L4 10l5.1-1.9zM18.5 14.5l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9z'/%3E%3C/svg%3E"); }
.ic.dupes { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E"); }
.ic.glass { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); }
.ic.phototext { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V6a2 2 0 0 1 2-2h2M16 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2v-2M8 10h8M8 14h5'/%3E%3C/svg%3E"); }
.ic.text { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 11h9M4 16h6'/%3E%3Ccircle cx='17' cy='15.5' r='3'/%3E%3Cpath d='m19.3 17.8 2.2 2.2'/%3E%3C/svg%3E"); }
.ic.mail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E"); }
.ic.phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='3'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E"); }
.ic.globe { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E"); }

.ic.hash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 4 7 20M17 4l-2 16M4.5 9h16M3.5 15h16'/%3E%3C/svg%3E"); }
.ic.chat { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-9l-5 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }
.ic.pen { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='m15 4 5 5L9 20H4v-5zM13 6l5 5'/%3E%3C/svg%3E"); }
.ic.swap { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20V5M4 9l4-4 4 4M16 4v15M20 15l-4 4-4-4'/%3E%3C/svg%3E"); }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px;
  border-radius: 999px; font-weight: 600; font-size: 17px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(23, 21, 31, 0.05); transition: transform 0.15s, box-shadow 0.15s; }
.button:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(23, 21, 31, 0.09); }
.button.primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 6px 20px rgba(91, 76, 240, 0.32); }
.button.primary:hover { box-shadow: 0 10px 26px rgba(91, 76, 240, 0.4); }
.button.small { height: 36px; padding: 0 16px; font-size: 15px; }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; height: 64px;
  padding: 0 max(20px, calc((100vw - 1120px) / 2)); background: var(--nav);
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; color: var(--ink); letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.nav nav { display: flex; gap: 22px; margin-left: auto; }
.nav nav a { color: var(--ink-2); font-size: 15px; }
.nav nav a:hover { color: var(--ink); text-decoration: none; }

/* Hero */
.hero { text-align: center; padding: 76px 20px 40px; position: relative; }
.hero::before { content: ""; position: absolute; inset: -80px 0 auto; height: 620px; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 30% 30%, rgba(140, 108, 255, 0.18), transparent 70%),
              radial-gradient(35% 45% at 72% 25%, rgba(255, 149, 0, 0.12), transparent 70%),
              radial-gradient(35% 40% at 55% 60%, rgba(52, 199, 89, 0.09), transparent 70%); }
.eyebrow { display: inline-block; margin: 0 0 20px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--accent); background: rgba(91, 76, 240, 0.08); }
.hero h1 { font-size: clamp(40px, 7vw, 76px); font-weight: 800; max-width: 900px; margin: 0 auto; }
.mark { background: linear-gradient(120deg, var(--accent-2), var(--accent) 45%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { max-width: 700px; margin: 24px auto 0; font-size: 20px; color: var(--ink-2); }
.lede q { color: var(--ink); font-weight: 600; white-space: nowrap; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.hero > .fine { margin-top: 14px; }

/* A Findy window drawn in HTML: the Videos shelf as it looks in the app. */
.window { position: relative; max-width: 1080px; margin: 0 auto; text-align: left; background: var(--surface); border-radius: 16px;
  border: 1px solid rgba(var(--ink-rgb), 0.12); box-shadow: 0 30px 80px rgba(40, 30, 90, 0.18), 0 6px 18px rgba(40, 30, 90, 0.08); overflow: hidden; }
.hero-window { margin-top: 56px; }
.titlebar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--chrome); }
.titlebar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.titlebar i:nth-child(2) { background: #febc2e; }
.titlebar i:nth-child(3) { background: #28c840; }
.search-pill { margin-left: auto; width: 300px; max-width: 45%; height: 28px; border-radius: 8px; background: rgba(var(--ink-rgb), 0.05);
  color: var(--ink-3); font-size: 13px; line-height: 28px; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app { display: flex; font-size: 13px; }
.sidebar { flex: none; width: 212px; padding: 10px 10px 16px; background: var(--sidebar); border-right: 1px solid var(--line); }
.sidebar p { margin: 0; }
.sidebar .group { font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 12px 8px 4px; }
.sidebar .row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; color: var(--ink); white-space: nowrap; }
.sidebar .row span { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sidebar .row.on { background: var(--indigo); color: #fff; }
.sidebar .row.on span { color: rgba(255, 255, 255, 0.8); }
.sidebar .ic { width: 15px; height: 15px; }
.sidebar .ic.home, .sidebar .ic.recents { color: var(--ink-2); }
.sidebar .ic.images { color: var(--blue); }
.sidebar .ic.videos { color: var(--purple); }
.sidebar .ic.music { color: var(--pink); }
.sidebar .ic.documents { color: var(--orange); }
.sidebar .ic.archives { color: var(--brown); }
.sidebar .ic.apps { color: var(--teal); }
.sidebar .ic.shots { color: var(--indigo); }
.sidebar .ic.large { color: var(--red); }
.sidebar .ic.downloads { color: var(--green); }
.sidebar .ic.cleanup { color: var(--yellow); }
.sidebar .ic.dupes { color: var(--pink); }
.sidebar .row.on .ic { color: #fff; }

.shelf { flex: 1; min-width: 0; padding: 18px 24px 24px; }
.shelf p { margin: 0; }
.crumbs { font-size: 12px; color: var(--ink-3); }
.shelf-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px !important; }
.shelf-sum { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.heading { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; margin-top: 20px !important; }
.count { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.07); color: var(--ink-2); }

.folders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.folder { --tint: var(--purple); position: relative; padding: 26px 14px 12px; border-radius: 0 13px 13px 13px; margin-top: 12px;
  background: color-mix(in srgb, var(--tint) 28%, var(--mix)); }
.folder::before { content: ""; position: absolute; left: 0; top: -12px; width: 42%; height: 14px; border-radius: 12px 14px 0 0;
  background: color-mix(in srgb, var(--tint) 28%, var(--mix)); }
.folder::after { content: ""; position: absolute; inset: 9px 0 0; border-radius: 12px; background: var(--folder-face);
  border: 1px solid var(--folder-edge); }
.folder > * { position: relative; z-index: 1; }
.folder.orange { --tint: var(--orange); }
.folder.green { --tint: var(--green); }
.folder.yellow { --tint: var(--yellow); }
.folder.blue { --tint: var(--blue); }
.folder .name { font: 500 13px/1.2 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-bottom: 10px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); }
.folder .foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.dots { display: flex; }
.dots i, .dots em { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); margin-right: -7px; }
.dots em { display: grid; place-items: center; font: normal 600 9px/1 -apple-system, sans-serif; color: var(--ink-2); background: var(--surface); }
.stat { margin-left: auto; text-align: right; font-weight: 600; font-size: 12px; line-height: 1.3; white-space: nowrap; }
.stat small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-2); }

.files-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.pills { display: flex; gap: 6px; margin-top: 20px !important; }
.pills span { height: 24px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; line-height: 22px; color: var(--ink-2); white-space: nowrap; }
.pills span::after { content: " ⌄"; font-size: 10px; }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.card { padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(23, 21, 31, 0.05); min-width: 0; }
.card p { font-size: 12.5px; font-weight: 600; margin: 7px 3px 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card small { display: block; margin: 1px 3px 2px; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; background: #ddd; overflow: hidden; }
.thumb.doc { aspect-ratio: 4 / 5; }
.len { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 600;
  color: #fff; background: rgba(0, 0, 0, 0.55); font-variant-numeric: tabular-nums; }

/* Made-up thumbnails: skies, seas and screens in CSS, no photos. Also the round samples on the folders. */
.t1 { background: radial-gradient(circle at 70% 42%, #fff4c2 0 9%, transparent 10%), linear-gradient(180deg, #ffb36b 0%, #ff7a8a 56%, #4b3b6b 57%, #2b2540 100%); }
.t2 { background: radial-gradient(ellipse 60% 18% at 30% 70%, rgba(255, 255, 255, 0.35), transparent 70%), linear-gradient(180deg, #a8dcff 0%, #5fb2e6 48%, #1f76b0 49%, #0f4c75 100%); }
.t3 { background: linear-gradient(90deg, transparent 22%, rgba(23, 21, 31, 0.06) 22% 23%, transparent 23%),
  linear-gradient(180deg, #ffffff 0 14%, #eceaf4 14% 15%, transparent 15%),
  radial-gradient(circle at 60% 55%, rgba(140, 108, 255, 0.55) 0 12%, transparent 13%), linear-gradient(135deg, #f5f4fb, #e6e3f3); }
.t4 { background: radial-gradient(circle at 25% 35%, #fff 0 6%, transparent 7%), linear-gradient(180deg, #d4eeb9 0%, #79b672 46%, #2f6b3d 47%, #1d4a2a 100%); }
.t5 { background: linear-gradient(180deg, transparent 0 62%, rgba(255, 255, 255, 0.14) 62% 70%, transparent 70%),
  radial-gradient(circle at 30% 35%, rgba(255, 255, 255, 0.9) 0 7%, transparent 8%), linear-gradient(135deg, #2a2440, #5b4cf0); }
.t6 { background: radial-gradient(circle at 65% 40%, rgba(255, 255, 255, 0.85) 0 14%, transparent 15%), linear-gradient(135deg, #ffd36e, #ff8a5c); }
.t7 { background: radial-gradient(circle at 78% 26%, #fff8e1 0 8%, transparent 9%), linear-gradient(180deg, #ffe7c2 0%, #a8d8ea 45%, #3b8ea5 46%, #245d73 100%); }
.t8 { background: linear-gradient(180deg, #c6ecff 0%, #82cbea 40%, #f1fafd 41% 45%, #3aa0c8 46%, #1d6f94 100%); }
.dots i.t3 { background: linear-gradient(135deg, #f5f4fb, #c9c1f5); }

/* The hero window shows Findy's Home (D-38–D-41): logo on top of the sidebar, greeting, big search,
   Downloaded From, Jump back in and Clean Up. Sizes are the app's, a little smaller. */
.window-title { margin-left: 168px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sidebar .logo { display: flex; align-items: center; gap: 8px; padding: 4px 8px 10px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.sidebar .logo img { border-radius: 5px; }
.home-page { flex: 1; min-width: 0; padding: 28px 28px 26px; }
.home-page p { margin: 0; }
.home-greeting { text-align: center; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.home-sum { text-align: center; margin-top: 6px !important; font-size: 13px; color: var(--ink-2); }
.home-field { display: flex; align-items: center; gap: 10px; max-width: 560px; height: 48px; margin: 18px auto 0 !important; padding: 0 7px 0 16px;
  border-radius: 13px; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 6px 18px rgba(23, 21, 31, 0.06); font-size: 14px; color: var(--ink-3); }
.home-field .ic { width: 16px; height: 16px; }
.home-field span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-go { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--accent) no-repeat center / 16px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.home-try { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px !important; font-size: 12px; }
.home-try span { padding: 4px 11px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.06); color: var(--ink); white-space: nowrap; }
.home-try .try { background: none; color: var(--ink-3); padding-right: 2px; }
.home-head { display: flex; align-items: baseline; justify-content: space-between; margin: 24px 0 10px; }
.home-head p { font-size: 15px; font-weight: 600; }
.home-head span { font-size: 12px; color: var(--accent); }
.home-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.source { --tint: var(--blue); display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.source .ic { width: 30px; height: 30px; flex: none; border-radius: 8px; color: var(--tint);
  background: color-mix(in srgb, var(--tint) 14%, transparent); -webkit-mask: none; mask: none; position: relative; }
.source .ic::after { content: ""; position: absolute; inset: 7px; background: var(--tint); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.source p { font-size: 12.5px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); }
.source.red { --tint: var(--red); }
.source.purple { --tint: var(--purple); }
.source.green { --tint: var(--green); }
.source.orange { --tint: var(--orange); }
.source.teal { --tint: var(--teal); }
.home-bottom { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.recent { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.recent:last-child { border-bottom: 0; }
.recent > i { flex: none; width: 34px; height: 34px; border-radius: 8px; }
.recent p { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); }
.recent > span { font-size: 11px; color: var(--ink-3); }
.doc-icon { --tint: var(--red); background:
  linear-gradient(var(--tint) 0 0) 9px 9px / 10px 3px no-repeat,
  repeating-linear-gradient(180deg, rgba(23, 21, 31, 0.18) 0 2px, transparent 2px 5px) 9px 15px / 16px 11px no-repeat,
  linear-gradient(#fff 0 0) 6px 4px / 22px 26px no-repeat, rgba(var(--ink-rgb), 0.06); }
.doc-icon.blue { --tint: var(--blue); }
.home-cleanup { margin-top: 24px; padding: 16px 16px 14px; border-radius: 15px; background: rgba(var(--ink-rgb), 0.04); }
.cleanup-title { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.cleanup-title .ic { width: 15px; height: 15px; color: var(--yellow); }
.cleanup-size { margin-top: 10px !important; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.cleanup-note { margin-top: 4px !important; font-size: 11.5px; color: var(--ink-2); }
.cleanup-row { display: flex; align-items: center; gap: 7px; margin-top: 7px !important; font-size: 12px; }
.cleanup-row b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); }
.dot.orange { background: var(--orange); }
.dot.green { background: var(--green); }
.dot.indigo { background: var(--indigo); }
.cleanup-review { margin-top: 12px !important; height: 30px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600;
  display: grid; place-items: center; }

/* Sections */
.section { padding: 110px 20px 0; max-width: 1120px; margin: 0 auto; scroll-margin-top: -40px; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.section-head h2, .faq h2 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; }
.section-head p { margin: 18px 0 0; font-size: 19px; color: var(--ink-2); }

/* Search demo */
.demo { max-width: 1000px; margin: 0 auto; text-align: center; container-type: inline-size; }
.examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.examples button { font: 500 15px/1 -apple-system, sans-serif; height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.examples button:hover { color: var(--ink); border-color: rgba(91, 76, 240, 0.35); }
.examples button[aria-selected="true"] { color: var(--accent); background: rgba(91, 76, 240, 0.08); border-color: rgba(91, 76, 240, 0.35); }
.caret { width: 2px; height: 24px; margin-left: -8px; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 30px; margin-top: 14px !important; }
.understood { font-size: 13px; color: var(--ink-3); margin-right: 4px; }
.chip { font-size: 14px; font-weight: 500; padding: 3px 11px; border-radius: 999px; color: var(--accent); background: rgba(91, 76, 240, 0.1);
  animation: pop 0.3s ease-out both; }
.chip::after { content: " ×"; opacity: 0.6; }
.chip.text { color: var(--ink); background: rgba(var(--ink-rgb), 0.06); }
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(0.96); } }
.snippet { margin: 6px 3px 2px !important; font-size: 11.5px !important; font-weight: 400 !important; color: var(--ink-2); white-space: normal !important; }
.snippet mark { background: rgba(255, 204, 0, 0.45); color: inherit; border-radius: 3px; padding: 0 2px; }
.doc-thumb { display: grid; place-items: center; background: linear-gradient(180deg, var(--thumb-a), var(--thumb-b)); border: 1px solid var(--line); }
.doc-thumb::before { content: ""; width: 46%; height: 70%; border-radius: 4px; background:
  linear-gradient(var(--tint, var(--red)) 0 0) 14% 16% / 40% 7% no-repeat,
  repeating-linear-gradient(180deg, rgba(23, 21, 31, 0.13) 0 3px, transparent 3px 9px) 14% 60% / 72% 52% no-repeat, #fff;
  box-shadow: 0 2px 8px rgba(23, 21, 31, 0.12); }
.zip-thumb { display: grid; place-items: center; background: linear-gradient(180deg, var(--zip-a), var(--zip-b)); }
.zip-thumb::before { content: ""; width: 34%; height: 62%; border-radius: 5px; background:
  repeating-linear-gradient(180deg, #a2845e 0 4px, transparent 4px 8px) 50% 0 / 12% 60% no-repeat, linear-gradient(180deg, #e4d6bf, #cdb995);
  box-shadow: 0 2px 8px rgba(23, 21, 31, 0.15); }
.shot-thumb { background: linear-gradient(180deg, #ffffff 0 16%, #ecebf3 16% 17%, transparent 17%),
  linear-gradient(90deg, transparent 10%, rgba(23, 21, 31, 0.1) 10% 60%, transparent 60%) 0 34% / 100% 6% no-repeat,
  linear-gradient(90deg, transparent 10%, rgba(255, 204, 0, 0.7) 10% 48%, transparent 48%) 0 50% / 100% 6% no-repeat,
  linear-gradient(90deg, transparent 10%, rgba(23, 21, 31, 0.08) 10% 70%, transparent 70%) 0 66% / 100% 6% no-repeat, #f7f6fb; }
.demo > .fine { margin-top: 18px; }
/* The search section: a Mac desktop with Findy's Quick Search open (QuickSearchView in the app). Sizes are
   in em off the section's width, so the scene shrinks as one picture on narrow screens. */
.desk { position: relative; aspect-ratio: 16 / 10; overflow: hidden; text-align: left; font-size: clamp(7px, 1.32cqw, 14px);
  border-radius: 1.1em; box-shadow: 0 30px 80px rgba(40, 30, 90, 0.22), 0 6px 18px rgba(40, 30, 90, 0.1);
  background:
    radial-gradient(60% 70% at 15% 20%, #b9a6ff 0%, transparent 60%),
    radial-gradient(55% 65% at 85% 25%, #ffc4a8 0%, transparent 60%),
    radial-gradient(70% 70% at 60% 95%, #8fd6ff 0%, transparent 60%),
    linear-gradient(135deg, #8e7cf3, #e98fb5 55%, #f6c48f); }
.desk p { margin: 0; }
.desk::before, .mini-desk::before { content: ""; position: absolute; inset: 0; background: var(--wall-dim); pointer-events: none; }
.desk-menubar { position: absolute; inset: 0 0 auto; height: 1.9em; display: flex; align-items: center; gap: 1.35em; padding: 0 1.2em;
  font-size: 0.95em; color: var(--bar-ink); background: var(--bar); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.desk-menubar b { font-weight: 700; }
.desk-status { margin-left: auto; display: flex; align-items: center; gap: 1em; }
.desk-status i { display: block; width: 1.15em; height: 1.15em; background: var(--bar-ink); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.desk-findy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v8.5M8 12.5l4 4 4-4'/%3E%3C/svg%3E"); }
.desk-wifi { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M2 9a15 15 0 0 1 20 0M5.5 12.5a10 10 0 0 1 13 0M9 16a5 5 0 0 1 6 0'/%3E%3Ccircle cx='12' cy='19.5' r='1' fill='black'/%3E%3C/svg%3E"); }
.desk-battery { width: 1.7em !important; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 16' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='1' y='1.5' width='28' height='13' rx='3.5'/%3E%3Crect x='3.5' y='4' width='19' height='8' rx='1.6' fill='black' stroke='none'/%3E%3Cpath d='M31.5 6v4'/%3E%3C/svg%3E"); }
.desk-clock { font-variant-numeric: tabular-nums; }

.desk-window { position: absolute; border-radius: 0.8em; background: var(--pane); box-shadow: 0 1em 2.6em rgba(40, 30, 90, 0.2); overflow: hidden; }
.desk-bar { display: flex; gap: 0.45em; padding: 0.65em 0.8em; }
.desk-bar i { width: 0.75em; height: 0.75em; border-radius: 50%; background: #ff5f57; }
.desk-bar i:nth-child(2) { background: #febc2e; }
.desk-bar i:nth-child(3) { background: #28c840; }
.desk-finder { left: 4%; top: 11%; width: 44%; height: 50%; }
.desk-side { position: absolute; left: 0; top: 0; bottom: 0; width: 28%; background: var(--pane-side);
  background-image: repeating-linear-gradient(180deg, transparent 0 2.6em, rgba(var(--ink-rgb), 0.08) 2.6em 3.4em); background-position: 0 2.4em; }
.desk-files { position: absolute; left: 32%; right: 4%; top: 3em; bottom: 6%;
  background: radial-gradient(circle, rgba(91, 76, 240, 0.32) 0 1.3em, transparent 1.35em) 0 0 / 25% 50%; }
.desk-doc { right: 5%; top: 20%; width: 36%; height: 58%; }
.desk-lines { position: absolute; inset: 3em 1.6em 1.6em;
  background: repeating-linear-gradient(180deg, rgba(var(--ink-rgb), 0.12) 0 0.45em, transparent 0.45em 1.4em); }

.desk-keys { position: absolute; left: 50%; top: 40%; display: flex; gap: 0.5em; transform: translate(-50%, -50%) scale(0.9); opacity: 0;
  transition: opacity 0.2s, transform 0.2s; z-index: 3; }
.desk-keys kbd { font-size: 2.2em; padding: 0.3em 0.55em; border-radius: 0.3em; background: var(--key); border: 1px solid rgba(var(--ink-rgb), 0.12);
  border-bottom-width: 3px; box-shadow: 0 0.5em 1.2em rgba(40, 30, 90, 0.2); }
.desk.keys .desk-keys { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.qs { position: absolute; left: 50%; top: 14%; width: 60%; z-index: 2; display: flex; flex-direction: column;
  border-radius: 1em; background: var(--glass); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid var(--glass-edge); box-shadow: 0 2.2em 5em rgba(30, 20, 70, 0.35), 0 0.3em 1em rgba(30, 20, 70, 0.15);
  transform: translateX(-50%); transition: opacity 0.22s ease-out, transform 0.22s ease-out; }
html.js .desk:not(.open) .qs { opacity: 0; transform: translateX(-50%) translateY(-0.8em) scale(0.97); }
.qs-field { display: flex; align-items: center; gap: 0.6em; padding: 0.75em 1em 0.35em; font-size: 1.6em; color: var(--ink); }
.qs-field .ic { width: 0.95em; height: 0.95em; color: var(--ink-3); }
.qs-field .caret { width: 2px; height: 1.05em; margin-left: -0.45em; }
.qs-chips { display: flex; flex-wrap: wrap; gap: 0.35em; min-height: 1.8em; padding: 0 1.25em 0.6em; margin: 0 !important; }
.qs-chips .chip { font-size: 0.85em; padding: 0.15em 0.7em; }
.qs-list { border-top: 1px solid rgba(var(--ink-rgb), 0.1); padding: 0.4em 0.5em 0.5em; min-height: 13.5em; }
.qs-section { font-size: 0.78em; font-weight: 600; color: var(--ink-3); padding: 0.3em 0.7em 0.35em; }
.qs-list:has(.qs-rows:empty) .qs-section { visibility: hidden; }
.qs-row { display: flex; align-items: center; gap: 0.75em; padding: 0.45em 0.7em; border-radius: 0.55em; animation: pop 0.28s ease-out both; }
.qs-row:nth-child(2) { animation-delay: 0.05s; }
.qs-row:nth-child(3) { animation-delay: 0.1s; }
.qs-row.on { background: var(--accent); color: #fff; }
.qs-row > i { flex: none; width: 2.3em; height: 2.3em; border-radius: 0.45em; }
.qs-row p { min-width: 0; font-size: 0.98em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-row small { display: block; font-size: 0.8em; font-weight: 400; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-row.on small { color: rgba(255, 255, 255, 0.82); }
.qs-row small mark { background: rgba(255, 204, 0, 0.5); color: inherit; border-radius: 0.2em; padding: 0 0.15em; }
.qs-row.on small mark { background: rgba(255, 255, 255, 0.28); }
.qs-footer { display: flex; gap: 1.2em; padding: 0.55em 1.25em; border-top: 1px solid rgba(var(--ink-rgb), 0.1); font-size: 0.78em; color: var(--ink-2); }
.qs-footer kbd { font-size: 0.9em; padding: 0.1em 0.4em; margin-right: 0.4em; border-radius: 0.3em; border-bottom-width: 1px; background: rgba(var(--ink-rgb), 0.07); border-color: transparent; }
.qs-esc { margin-left: auto; }

.desk-dock { position: absolute; left: 50%; bottom: 2.2%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5em; padding: 0.45em;
  border-radius: 1.2em; background: var(--dock); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--dock-edge); }
.desk-dock i, .desk-dock img { width: 3em; height: 3em; border-radius: 0.75em; display: block; }
.desk-dock .d1 { background: linear-gradient(160deg, #6fc3ff, #2f7ef0); }
.desk-dock .d2 { background: linear-gradient(160deg, #ffffff, #dcdce4); }
.desk-dock .d3 { background: linear-gradient(160deg, #7be08b, #29a84a); }
.desk-dock .d4 { background: linear-gradient(160deg, #ffd36e, #ff8a3d); }
.desk-dock .d5 { background: linear-gradient(160deg, #ff8fb1, #e53e72); }
.desk-dock .d6 { background: linear-gradient(160deg, #b9b9c6, #6e6e7d); }


/* Features: text on one side, a picture of that part of Findy on the other, drawn from the real screens
   (D-35). The pictures are sized in em off their own width, so each one shrinks as a whole on a phone. */
.feature-list { display: grid; gap: 96px; max-width: 1080px; margin: 0 auto; }
.feature { --tint: var(--blue); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 60px; align-items: center; }
.feature:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.feature:nth-child(even) .feature-text { order: 2; }
.feature.orange { --tint: var(--orange); }
.feature.green { --tint: var(--green); }
.feature.purple { --tint: var(--purple); }
.feature.pink { --tint: var(--pink); }
.feature.teal { --tint: var(--teal); }
.feature-text .ic { display: grid; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 13px; position: relative;
  background: color-mix(in srgb, var(--tint) 14%, transparent); -webkit-mask: none; mask: none; }
.feature-text .ic::after { content: ""; position: absolute; inset: 12px; background: var(--tint); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.feature-text h3 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 800; }
.feature-text p { margin: 14px 0 0; font-size: 18px; color: var(--ink-2); }
.feature-text q { color: var(--ink); font-weight: 600; }
/* The pictures keep their own colours: thumbnails fall back to theirs instead of the feature's. */
.feature-shot { container-type: inline-size; min-width: 0; --tint: initial; }

:where(.mini, .mini-desk) p { margin: 0; }
:is(.mini, .mini-desk) .red { --tint: var(--red); }
:is(.mini, .mini-desk) .orange { --tint: var(--orange); }
:is(.mini, .mini-desk) .green { --tint: var(--green); }
:is(.mini, .mini-desk) .teal { --tint: var(--teal); }
:is(.mini, .mini-desk) .blue { --tint: var(--blue); }
:is(.mini, .mini-desk) .indigo { --tint: var(--indigo); }
:is(.mini, .mini-desk) .purple { --tint: var(--purple); }
.mini { position: relative; overflow: hidden; text-align: left; font-size: clamp(5.5px, 1.6cqw, 11px); background: var(--surface);
  border-radius: 1.3em; border: 1px solid var(--line); box-shadow: 0 2.4em 6em rgba(40, 30, 90, 0.14), 0 0.4em 1.2em rgba(40, 30, 90, 0.06); }
.mini .ic { width: 1.1em; height: 1.1em; }
.mini-bar { display: flex; align-items: center; gap: 0.6em; height: 3.8em; padding: 0 1.3em; border-bottom: 1px solid var(--line); background: var(--chrome); }
.mini-bar > i { flex: none; width: 1.05em; height: 1.05em; border-radius: 50%; background: #ff5f57; }
.mini-bar > i:nth-child(2) { background: #febc2e; }
.mini-bar > i:nth-child(3) { background: #28c840; }
.mini-bar > span { margin-left: 0.8em; font-size: 1.15em; font-weight: 600; color: var(--ink-2); }
.mini-search { margin-left: auto !important; display: flex; align-items: center; gap: 0.55em; width: 22em; height: 2.5em; padding: 0 0.9em;
  border-radius: 1.25em; background: rgba(var(--ink-rgb), 0.05); font-size: 1.05em; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.mini-search.on { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px rgba(91, 76, 240, 0.55), 0 0 0 0.25em rgba(91, 76, 240, 0.16); }
.mini-body { padding: 2.1em 2.3em 2.3em; min-width: 0; }
.mini-path { font-size: 1.05em; color: var(--ink-3); margin-bottom: 0.3em !important; }
.mini-title { font-size: 2.7em; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.mini-sum { font-size: 1.25em; color: var(--ink-3); margin-top: 0.2em !important; }
.mini-h { display: flex; align-items: center; gap: 0.5em; margin-top: 1.6em !important; font-size: 1.45em; font-weight: 700; }
.mini-h em { font-style: normal; font-size: 0.72em; font-weight: 600; padding: 0.15em 0.65em; border-radius: 1em; background: rgba(var(--ink-rgb), 0.06); color: var(--ink-2); }
.m-link { margin-left: auto; font-size: 0.72em; font-weight: 500; color: var(--blue); }
.m-pills { margin-left: auto; display: flex; gap: 0.45em; font-size: 0.62em; font-weight: 500; }
.m-pills span { padding: 0.35em 0.9em; border: 1px solid var(--line); border-radius: 1em; color: var(--ink-2); white-space: nowrap; }
.m-pills span::after { content: " ⌄"; }

/* Collections: folders like on the shelf page (ShelfCollection tints). */
.m-folders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3em; margin-top: 2.3em; }
.m-folder { --tint: var(--purple); position: relative; padding: 2.3em 1.3em 1.2em; border-radius: 0 1.2em 1.2em 1.2em; min-width: 0;
  background: color-mix(in srgb, var(--tint) 28%, var(--mix)); }
.m-folder::before { content: ""; position: absolute; left: 0; top: -1.1em; width: 42%; height: 1.3em; border-radius: 1.1em 1.3em 0 0;
  background: color-mix(in srgb, var(--tint) 28%, var(--mix)); }
.m-folder::after { content: ""; position: absolute; inset: 0.8em 0 0; border-radius: 1.1em; background: var(--folder-face); border: 1px solid var(--folder-edge); }
.m-folder > * { position: relative; z-index: 1; }
.m-folder > p { font: 500 1.2em/1.2 var(--mono); padding-bottom: 0.8em; border-bottom: 1px solid rgba(var(--ink-rgb), 0.09); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-folder > div { display: flex; align-items: center; margin-top: 0.9em; }
.m-dots { display: flex; }
.m-dots i, .m-dots em { width: 2.1em; height: 2.1em; border-radius: 50%; border: 0.18em solid var(--surface); margin-right: -0.65em; }
.m-dots em { display: grid; place-items: center; font: normal 600 0.75em/1 -apple-system, sans-serif; width: 2.8em; height: 2.8em; color: var(--ink-2); background: var(--surface); }
.m-folder small { margin-left: auto; text-align: right; font-size: 1em; color: var(--ink-2); white-space: nowrap; }
.m-folder small b { display: block; font-size: 1.1em; color: var(--ink); }

/* File cards. */
.m-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1em; margin-top: 1.1em; }
.m-card { min-width: 0; padding: 0.55em; border-radius: 1.1em; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(23, 21, 31, 0.05); }
.m-card > i { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 0.75em; overflow: hidden; }
.m-card p { margin: 0.6em 0.25em 0 !important; font-size: 1.15em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-card small { display: flex; align-items: center; gap: 0.35em; margin: 0.15em 0.3em 0.2em; font-size: 1em; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.m-card small .ic { width: 1em; height: 1em; }
.m-card.on { border-color: var(--accent); box-shadow: 0 0 0 0.2em rgba(91, 76, 240, 0.25); }

/* The text on a screenshot: a made-up Wi-Fi settings screen with real words on it. */
.m-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); }
.m-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45em; margin-top: 1.1em !important; }
.m-understood { font-size: 1em; color: var(--ink-3); margin-right: 0.2em; }
.m-chip { font-size: 1.05em; font-weight: 500; padding: 0.2em 0.8em; border-radius: 1em; color: var(--accent); background: rgba(91, 76, 240, 0.1); }
.m-chip::after { content: " ×"; opacity: 0.6; }
.m-found { width: 62%; margin-top: 1.6em; }
.m-screen { display: flex !important; flex-direction: column; align-items: stretch; place-items: initial !important; gap: 0.35em; padding: 0 0 0.6em;
  background: #fff; border: 1px solid var(--line); font-style: normal; font-size: 0.62em; color: var(--ink-2); line-height: 1.3; text-align: left; }
.m-screen b { padding: 0.25em 0.8em; background: #f4b4b0; color: #6b2622; font-size: 0.9em; }
.m-screen span { padding: 0 0.8em; white-space: nowrap; }
.m-screen mark, .m-text mark, .m-snippet mark { background: rgba(255, 204, 0, 0.55); color: inherit; border-radius: 0.2em; padding: 0 0.1em; }
.m-card .m-snippet { display: block; margin-top: 0.4em; font-style: italic; white-space: normal; line-height: 1.35; }
.m-inspector { min-width: 0; padding: 1.6em 1.8em 2em; border-left: 1px solid var(--line); background: var(--chrome); }
.m-preview { padding: 1.2em; border-radius: 1em; background: rgba(var(--ink-rgb), 0.05); }
.m-preview .m-screen { aspect-ratio: 16 / 10; font-size: 1em; border-radius: 0.3em; }
.m-name { margin-top: 1.2em !important; font-size: 1.3em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-kind { font-size: 1.1em; color: var(--ink-3); }
.m-sec { display: flex; align-items: center; margin-top: 1.4em !important; font-size: 1.1em; font-weight: 700; }
.m-button { margin-left: auto; padding: 0.25em 0.8em; border-radius: 0.5em; background: rgba(var(--ink-rgb), 0.07); font-size: 0.9em; font-weight: 500; }
.m-kv { display: flex; gap: 0.8em; margin-top: 0.4em !important; font-size: 1.05em; }
.m-kv span { width: 6.5em; text-align: right; color: var(--ink-3); }
.m-text { margin-top: 0.6em !important; padding: 0.8em 1em; border-radius: 0.7em; background: rgba(var(--ink-rgb), 0.05); font-size: 1.05em; line-height: 1.45; }

/* Photos with words on them: a ticket on a table, a letter, a booking screenshot, each with what Findy read. */
.m-cards.m-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.6em; }
.m-photo { position: relative; display: grid !important; place-items: center; overflow: hidden; }
.m-photo.wood { background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.05) 0 0.4em, transparent 0.4em 1.3em), linear-gradient(135deg, #c39466, #8a5a36); }
.m-photo.slate { background: radial-gradient(70% 60% at 30% 20%, rgba(255, 255, 255, 0.18), transparent 70%), linear-gradient(135deg, #6b7b8d, #303b48); }
.m-paper { display: block; width: 72%; padding: 0.7em 0.8em; background: #fffdf7; box-shadow: 0 0.5em 1.2em rgba(0, 0, 0, 0.35);
  font-size: 0.55em; line-height: 1.35; color: #4a4a4a; text-align: left; font-style: normal; transform: rotate(-6deg); }
.m-paper.right { transform: rotate(5deg); }
.m-paper b { display: block; margin-bottom: 0.3em; font-size: 1.1em; letter-spacing: 0.06em; color: #17151f; }
.m-paper em { display: block; margin-top: 0.4em; font-style: normal; font-weight: 700; color: #17151f; }
.m-screen.blue b { background: #bcd5f6; color: #1d3d66; }
.m-photos .m-screen { font-size: 0.62em; }
.m-photos .m-screen span { padding-top: 0.2em; }

/* Downloaded From: one tile per source (SourceFilter tints). */
.m-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; margin-top: 1.8em; }
.m-source { --tint: var(--blue); display: flex; align-items: center; gap: 1em; min-width: 0; padding: 1.1em 1.2em; border-radius: 1.2em;
  background: color-mix(in srgb, var(--tint) 8%, var(--mix)); }
.m-source p { min-width: 0; font-size: 1.25em; font-weight: 600; white-space: nowrap; }
.m-source small { display: block; font-size: 0.8em; font-weight: 400; color: var(--ink-2); }
.m-source small + small { color: var(--ink-3); }
.mini .m-sq { width: 3.3em; height: 3.3em; flex: none; border-radius: 0.85em; position: relative;
  background: color-mix(in srgb, var(--tint) 16%, transparent); -webkit-mask: none; mask: none; }
.mini .m-sq::after { content: ""; position: absolute; inset: 24%; background: var(--tint); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

/* Clean Up: the cards with their size, and the toast with Undo after a move to the Trash. */
.m-note { display: flex; align-items: center; gap: 0.5em; margin-top: 0.6em !important; font-size: 1.05em; color: var(--ink-3); }
.m-clean { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1em; margin-top: 1.8em; }
.m-ccard { --tint: var(--blue); min-width: 0; padding: 1.2em 1.3em 1.3em; border-radius: 1.3em; background: color-mix(in srgb, var(--tint) 7%, var(--mix)); }
.m-chead { display: flex; align-items: center; gap: 0.6em; }
.m-chead span { min-width: 0; font-size: 1.05em; font-weight: 700; line-height: 1.2; }
.m-chead small { display: block; font-size: 0.8em; font-weight: 400; color: var(--ink-3); }
.m-chead em { margin-left: auto; flex: none; font-style: normal; font-size: 1.3em; font-weight: 700; white-space: nowrap; }
.m-ccard .m-sq { width: 2.5em; height: 2.5em; }
.m-cdesc { margin-top: 0.8em !important; font-size: 1em; line-height: 1.4; color: var(--ink-2); }
.m-thumbs { display: flex; gap: 0.5em; margin-top: 0.8em !important; }
.m-thumbs i { display: grid; place-items: center; width: 3.6em; height: 3.6em; border-radius: 0.6em; overflow: hidden; }
.mini-body.m-has-toast { padding-bottom: 6.4em; }
.m-toast { position: absolute; left: 50%; bottom: 1.8em; transform: translateX(-50%); display: flex; align-items: center; gap: 1em; padding: 0.7em 0.8em 0.7em 1.5em;
  border-radius: 2em; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0.6em 2em rgba(23, 21, 31, 0.2); font-size: 1.15em; white-space: nowrap; }
.m-toast span { padding: 0.3em 0.9em; border-radius: 1em; background: var(--accent); color: #fff; font-weight: 600; }

/* Quick Search over Mail: the found file is dragged into the message (QuickSearchView rows are draggable). */
.mini-desk { position: relative; aspect-ratio: 16 / 11; overflow: hidden; text-align: left; font-size: clamp(5px, 1.45cqw, 11px); border-radius: 1.3em;
  box-shadow: 0 2.4em 6em rgba(40, 30, 90, 0.2), 0 0.4em 1.2em rgba(40, 30, 90, 0.08);
  background: radial-gradient(60% 70% at 15% 20%, #b9a6ff 0%, transparent 60%), radial-gradient(55% 65% at 85% 25%, #ffc4a8 0%, transparent 60%),
    radial-gradient(70% 70% at 60% 95%, #8fd6ff 0%, transparent 60%), linear-gradient(135deg, #8e7cf3, #e98fb5 55%, #f6c48f); }
.mini-desk .desk-menubar span:not(.desk-status):not(.desk-clock) { display: inline; }
.m-mail { left: 3%; top: 9%; width: 47%; height: 84%; background: var(--pane-solid); }
.m-lines { height: 5.2em; margin: 0.4em 1.3em; background: repeating-linear-gradient(180deg, rgba(var(--ink-rgb), 0.1) 0 0.5em, transparent 0.5em 1.45em); }
.m-lines.short { width: 40%; height: 1.9em; margin-top: 1.4em; }
.m-mail .desk-bar { align-items: center; border-bottom: 1px solid var(--line); }
.m-mail .desk-bar span { margin-left: auto; margin-right: auto; font-size: 1.05em; font-weight: 600; color: var(--ink-2); transform: translateX(-1.5em); }
.m-field { padding: 0.65em 1.3em; border-bottom: 1px solid var(--line); font-size: 1.1em; }
.m-field span { color: var(--ink-3); margin-right: 0.5em; }
.m-msg { padding: 1em 1.3em 0.6em; font-size: 1.1em; }
.m-attach { display: inline-flex; align-items: center; gap: 0.7em; margin: 0.6em 1.3em !important; padding: 0.6em 1em 0.6em 0.6em; border-radius: 0.8em;
  background: rgba(var(--ink-rgb), 0.05); font-size: 1.05em; font-weight: 600; animation: attach 6s ease-out infinite; }
.m-attach i, .m-ghost i { width: 2.4em; height: 2.6em; border-radius: 0.4em; display: grid; place-items: center; }
.m-attach small { display: block; font-weight: 400; color: var(--ink-3); }
.mini-desk .qs { left: auto; right: 3%; top: 17%; width: 54%; transform: none; transition: none; }
.mini-desk .qs-list { min-height: 0; }
.m-ghost { position: absolute; z-index: 4; display: flex; align-items: center; gap: 0.6em; padding: 0.45em 0.9em 0.45em 0.45em; border-radius: 0.8em;
  background: var(--key); box-shadow: 0 0.8em 2em rgba(23, 21, 31, 0.25); font-size: 1.05em; font-weight: 600; white-space: nowrap;
  left: 50%; top: 38%; opacity: 0; animation: drag 6s ease-in-out infinite; }
.m-ghost::after { content: ""; position: absolute; right: -0.9em; bottom: -1.1em; width: 1.6em; height: 1.6em; background: #17151f;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2v18l5-5 3.5 7 3-1.5L13 13.5h7z' fill='black' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2v18l5-5 3.5 7 3-1.5L13 13.5h7z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; }
/* A phone-sized picture: bigger text, fewer cards. */
@container (max-width: 520px) {
  .mini { font-size: 2.15cqw; }
  .mini-desk { font-size: 1.9cqw; aspect-ratio: 4 / 3.4; }
  .mini-search { width: 15em; }
  .m-pills { display: none; }
  .m-dots i:nth-child(n+3), .m-dots em { display: none; }
  .m-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-cards > :nth-child(n+7) { display: none; }
  .m-sources .m-source:nth-child(n+7), .m-sources + .mini-h + .m-cards > :nth-child(n+4) { display: none; }
  .m-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-clean { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-clean > :nth-child(n+5) { display: none; }
  .m-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
  .m-found { width: 100%; }
  .m-kv span { width: 5.5em; }
  .mini-desk .qs { width: 60%; top: 15%; }
  .m-mail { width: 46%; }
}
@keyframes drag {
  0%, 12% { left: 50%; top: 38%; opacity: 0; transform: scale(0.9); }
  18% { left: 49%; top: 38%; opacity: 1; transform: none; }
  58% { left: 7%; top: 52%; opacity: 1; transform: none; }
  64%, 100% { left: 7%; top: 52%; opacity: 0; transform: scale(0.9); }
}
@keyframes attach {
  0%, 58% { opacity: 0; transform: scale(0.92); }
  64%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

/* Privacy */
.privacy { max-width: none; margin-top: 110px; padding: 90px max(20px, calc((100vw - 1120px) / 2)); background: var(--privacy); color: #fff; }
.privacy .section-head p { color: rgba(255, 255, 255, 0.7); }
.promises { list-style: none; padding: 0; margin: 0 auto; max-width: 960px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.promises li { padding: 22px 24px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72); font-size: 16px; }
.promises b { color: #fff; }

/* Pricing */
.pricing { text-align: center; }
.plan { max-width: 420px; margin: 0 auto; padding: 36px 32px 28px; border-radius: 26px; background: var(--surface);
  border: 1px solid rgba(91, 76, 240, 0.25); box-shadow: 0 24px 60px rgba(91, 76, 240, 0.16); }
.plan-icon { display: block; margin: 0 auto 10px; }
.plan h3 { font-size: 24px; }
.price { font-size: 64px; font-weight: 800; letter-spacing: -0.03em; margin: 8px 0 0; line-height: 1; }
.price span { font-size: 30px; vertical-align: 24px; margin-right: 2px; }
.plan-note { margin: 6px 0 0; color: var(--ink-2); }
.plan-list { list-style: none; padding: 0; margin: 22px auto 26px; display: grid; gap: 8px; text-align: left; width: fit-content; }
.plan-list li { padding-left: 28px; position: relative; }
.plan-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--green); margin-top: 3px; }
.plan .button { width: 100%; }
.plan .fine { margin: 16px 0 0; }
.pricing > .fine { margin-top: 22px; }

/* FAQ */
.faq { max-width: 780px; }
.faq h2 { text-align: center; margin-bottom: 30px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; font-weight: 600; font-size: 18px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 24px; font-weight: 400; color: var(--ink-3); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--ink-2); }

.footer { text-align: center; padding: 100px 20px 48px; color: var(--ink-2); }
.footer p { margin: 6px 0; }
.footer .fine { max-width: 640px; margin: 10px auto 0; }

/* Thanks and 404 */
.page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 20px; }
.page h1 { font-size: clamp(40px, 8vw, 64px); font-weight: 800; margin-top: 18px; }
.page .lede { margin-top: 14px; }
.steps { text-align: left; max-width: 520px; margin: 30px auto 0; padding-left: 22px; color: var(--ink-2); display: grid; gap: 10px; }
.steps strong { color: var(--ink); font-family: var(--mono); font-size: 0.92em; }
.page .cta { align-items: center; }
.page > .fine { max-width: 520px; margin-top: 28px; }

/* Appear on scroll (only with JavaScript and motion allowed). */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .chip, .qs-row, .caret, .m-attach, .m-ghost { animation: none; }
  .m-ghost { display: none; }
  .qs, .desk-keys { transition: none; }
}

@media (max-width: 960px) {
  .sidebar { display: none; }
  .window-title { margin-left: 12px; }
  .folders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards .card:nth-child(n+7) { display: none; }
  .feature, .feature:nth-child(even) { grid-template-columns: 1fr; gap: 28px; }
  .feature:nth-child(even) .feature-text { order: 0; }
  .feature-text { max-width: 620px; }
  .feature-list { gap: 72px; }
  .pills span:nth-child(-n+2) { display: none; }
}
@media (max-width: 720px) {
  .desk { aspect-ratio: 1 / 1; font-size: clamp(6px, 2.6cqw, 12px); }
  .desk-menubar span:not(.desk-status):not(.desk-clock) { display: none; }
  .desk-doc { display: none; }
  .desk-finder { width: 70%; height: 30%; }
  .qs { width: 90%; top: 12%; }
  .qs-footer span:nth-child(3) { display: none; }
  .nav { gap: 12px; }
  .nav nav { display: none; }
  .nav .button { margin-left: auto; }
  .hero { padding-top: 48px; }
  .lede { font-size: 18px; }
  .lede q { white-space: normal; }
  .hero-window { margin-top: 40px; border-radius: 12px; }
  .search-pill { display: none; }
  .shelf { padding: 14px 14px 16px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards .card:nth-child(n+5) { display: none; }
  .pills { display: none; }
      .home-page { padding: 20px 14px; }
  .home-greeting { font-size: 21px; }
  .home-try span:nth-child(n+4) { display: none; }
  .home-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-sources .source:nth-child(n+5) { display: none; }
  .home-bottom { grid-template-columns: 1fr; gap: 0; }
  .recent:nth-child(n+5) { display: none; }
      .promises { grid-template-columns: 1fr; }
  .section { padding-top: 80px; }
  .privacy { margin-top: 80px; padding-top: 70px; padding-bottom: 70px; }
}

/* Dark, for parts that set their own colours above: these come last so they win. */
@media (prefers-color-scheme: dark) {
  .chip, .m-chip { background: rgba(111, 96, 255, 0.22); color: #b3a9ff; }
  .eyebrow { color: #b3a9ff; background: rgba(111, 96, 255, 0.16); }
  a, .home-head span { color: #a89dff; }
  .button.primary, .button.primary:hover { color: #fff; }
  .privacy { border-block: 1px solid var(--line); }
  /* Highlighted words: solid yellow with dark text, like found text in macOS dark mode. The made-up
     screenshots stay light, so their marks stay as they are. */
  .snippet mark, .m-snippet mark, .m-text mark, .qs-row:not(.on) small mark { background: rgba(255, 214, 10, 0.82); color: #17151f; }
  .examples button[aria-selected="true"] { color: #b3a9ff; }
}