:root {
  color-scheme: light;
  /* Every value here is read off the application rather than chosen for the
     page, because the two were being designed by different people and one of
     them was me twice. `Surface.swift`, `Composer.swift` and `Brand.swift` are
     the source; what is written beside each one is where it comes from.

     What the application actually looks like, stated once: the only bold thing
     in it is the wordmark. Everything else is regular or semibold at twelve to
     fifteen points, in white at sixty percent, on a very dark surface with a
     ten point corner and a hairline. The site had been doing the exact
     opposite, which is why nothing on it felt like Dot. */

  --ink: #141414;                    /* Surface.ink, white 0.08. Not black. */
  --muted: rgba(20, 20, 22, .62);    /* the composer's 0.6 items */
  --faint: rgba(20, 20, 22, .4);     /* the composer's 0.4 items */
  --line: rgba(20, 20, 22, .13);
  --bg: #ffffff;

  /* The material the menu, the dot and the caption are all made of. */
  --slab: #17171a;
  --on-slab: rgba(255, 255, 255, .62);
  --on-slab-faint: rgba(255, 255, 255, .4);
  --edge: rgba(255, 255, 255, .14);  /* Surface.edge, at one pixel */

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Composer.radius is ten points, and the site had grown to twenty six. Ten
     is why the application looks made rather than styled: a tight corner is a
     drawn edge and a soft one is a blob. */
  --r: 10px;
  /* Surface.menuShadow: radius 16, offset zero, opacity 0.3. Offset zero is
     the part that matters. A shadow pushed downwards is a card lying on a
     desk; a shadow with no direction is a thing lit from everywhere, which is
     what every surface in the application is. */
  --lift: 0 0 16px rgba(20, 20, 22, .13);
  --lift-lg: 0 0 34px rgba(20, 20, 22, .18);
  --lift-slab: 0 0 16px rgba(0, 0, 0, .3);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.58 var(--ui);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; }

/* The section that has no recording in it yet takes itself out of the page, and
   a stylesheet that sets `display` on anything would quietly put it back. */
[hidden] { display: none !important; }

/* A link to #faq lands the heading underneath the bar without this, which reads
   as the link having gone to the wrong place. */
section[id] { scroll-margin-top: 74px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---- The bar, which is the application's bar ---- */

/* Not "in the style of" the composer. The same material, the same ten point
   corner, the same hairline, the same shadow with no direction, the same
   sixty percent white items with one white pressable thing on the right. A
   person who has used Dot for a minute has already seen this. */
.top {
  position: fixed; z-index: 50; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
  padding: 9px 9px 9px 16px; border-radius: var(--r);
  /* The composer's fill is a film over a blurred *screen*, which is usually
     something dark. Over white paper the same alpha composites to a mid grey,
     which is a different object. So the film is nearly opaque here and the
     blur is kept for where the bar crosses a painting. */
  background: rgba(23, 23, 26, .93);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: var(--lift-slab), inset 0 0 0 1px var(--edge);
  max-width: calc(100vw - 24px);
}
/* The one bold thing in the application, and now the one bold thing here. */
.top .mark {
  /* Spacing is the font's. It was -0.06em, an eleventh of the word taken out
     of it, which pushed the D into the o. */
  font-size: 1.15rem; font-weight: 700; color: #fff;
  text-decoration: none; line-height: 1; user-select: none; margin-right: 2px;
  /* One word that must stay on one line. The bar is a flex box with a width it
     may not exceed, and it will squeeze whatever is in here until it wraps.
     That mattered more when the o was an inline block: a narrow window stacked
     the D, the disc and the t on top of each other, which is not a logo, it is
     an accident. A word wraps less readily than three boxes, and the rule stays
     because the failure it prevents has been seen. */
  white-space: nowrap; flex: 0 0 auto;
}
.topnav { margin: 0 0 0 auto; display: flex; align-items: center; }
.topnav > * + * { margin-left: clamp(14px, 2vw, 22px); }
/* Collapsible, so `bar.js` can take it to no width without the letters
   wrapping or spilling out of it on the way. `min-width` is the load-bearing
   one: a flex item defaults to `min-width: auto`, which refuses to go below
   the width of the word inside it, so setting the width to zero left most of
   "Pricing" still occupying the row and the gap opened from the wrong place. */
.topnav .js-price { overflow: hidden; white-space: nowrap; min-width: 0; }
/* Shut, on the page it points at. It is in the row on every page so that
   closing is the same animation as opening played backwards: the word is
   clipped away by its own box narrowing, which is what it cannot be if the
   element is simply not there. */
.topnav .js-price.off { width: 0; margin-left: 0; opacity: 0; }
.topnav a {
  font-size: .82rem; font-weight: 400; letter-spacing: 0;
  color: var(--on-slab); text-decoration: none; transition: color 150ms ease;
  white-space: nowrap; flex: 0 0 auto;
}
.topnav a:hover { color: #fff; }
/* `Brand.PillButton`: white with dark lettering, the same as the send disc,
   so pressable is one appearance everywhere rather than one per surface. */
.topnav .top-get {
  padding: 7px 15px; border-radius: 999px; background: #fff; color: var(--ink);
  font-weight: 600; font-size: .82rem;
}
.topnav .top-get:hover { color: var(--ink); opacity: .88; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center; gap: clamp(28px, 4vw, 64px);
  min-height: 100svh;
  padding: clamp(96px, 12vh, 132px) clamp(24px, 4vw, 56px) clamp(40px, 6vh, 72px);
}
.intro { max-width: 34rem; }

/* Semibold at a normal tracking, not bold squeezed to minus five percent.
   The application sets exactly one thing in bold and it is the wordmark; every
   other line in it is regular or semibold. A page whose every heading is the
   heaviest weight available has no hierarchy, it has volume. */
.headline {
  margin: 0; max-width: 14ch;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 600;
  letter-spacing: -0.028em; line-height: 1.06;
}
.lede {
  margin: 1.2rem 0 0; max-width: 29rem;
  font-size: clamp(1rem, 1.3vw, 1.1rem); color: var(--muted);
  letter-spacing: -0.012em; line-height: 1.55;
}

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 1.9rem; }
.actions .download { margin-top: 0; }

/* A pill and not a bezel, and the highest contrast thing on whatever it is
   sitting on: ink on paper here, white on the dark surfaces, which is what the
   send disc and `PillButton` are in the application. */
.download {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: .9rem; font-weight: 600; letter-spacing: -0.012em; text-decoration: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.download:hover { opacity: .88; }
.download:active { transform: scale(.98); }
.download.big { padding: 15px 32px; font-size: .95rem; }
.scene.dark .download, .scene.plate .download { background: #fff; color: var(--ink); }
/* Quiet, and directly under the button, because it is only ever read by
   somebody deciding whether to press it. */
.needs { margin: 1.1rem 0 0; font-size: .78rem; color: var(--faint); letter-spacing: 0; }
.download.pressed { transform: scale(.96); }

/* The same footer on every page, at the same distance from the same two edges.
   The front page pins it to the viewport, because the hero fills the screen and
   has no end to sit after; every other page is a document, so it sits after the
   document. Both use the identical insets, which is the point: the insets are
   measured from the window in both cases, not from whatever column the content
   happens to be in. */
.legal-links { margin: 0; font-size: .76rem; color: var(--faint); }
.legal-links a, .legal-links .rights { text-decoration: none; margin-right: 1.1rem; }
.legal-links a:hover { color: var(--ink); }

/* Pinned to the viewport while the hero was the entire page. It is not any
   more, and a fixed footer over a scrolling one sits on top of the writing. */
footer.legal-links {
  padding: clamp(44px, 5vw, 72px) clamp(24px, 4vw, 64px) clamp(28px, 3vw, 40px);
  text-align: center;
}

/* ---- Windows, stacked the way they sit on a real screen ---- */

/* Beside the writing, in its own column. The windows inside it are positioned
   as percentages of this box, so the only thing that has to be right is the
   box. */
.stage { position: relative; height: min(72svh, 620px); min-height: 380px; }

.win {
  position: absolute; background: #1e1e20;
  border: 1px solid #35353b; border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
  overflow: hidden; font-family: var(--ui); font-size: 12px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 260ms ease, transform 260ms ease, filter 240ms ease;
  display: flex; flex-direction: column;
}
.win.up { opacity: 1; transform: none; }
.win.back { filter: brightness(.5) saturate(.85); }
.win { container-type: inline-size; }

/* macOS title bar */
.tb {
  height: 38px; flex: 0 0 38px; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; background: #2b2b2f; border-bottom: 1px solid #38383e; position: relative;
}
.lights { display: flex; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #4a4a51; }
.win.front .lights i:nth-child(1) { background: #ff5f57; }
.win.front .lights i:nth-child(2) { background: #febc2e; }
.win.front .lights i:nth-child(3) { background: #28c840; }
.tb .name {
  position: absolute; left: 0; right: 0; text-align: center; pointer-events: none;
  font-size: 12.5px; font-weight: 600; color: #b9b9c1; letter-spacing: -.01em;
}
.tb .btns { display: flex; gap: 14px; margin-left: 14px; z-index: 1; color: #9a9aa3; font-size: 12px; }
.tb .right { margin-left: auto; z-index: 1; display: flex; align-items: center; gap: 10px; }
.field { width: 132px; height: 22px; border-radius: 6px; background: #3a3a41; display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 11px; color: #8b8b94; }

.body { flex: 1; display: flex; min-height: 0; }

/* Sidebars */
.side { flex: 0 1 138px; min-width: 0; background: #232326; border-right: 1px solid #34343a; padding: 8px 8px; overflow: hidden; }
.side .h { font-size: 10.5px; font-weight: 700; color: #7c7c86; padding: 6px 6px 4px; }
.side .it { display: flex; align-items: center; gap: 7px; padding: 4px 7px; border-radius: 5px; color: #d0d0d7; font-size: 12px; }
.side .it.on { background: #3d3d45; color: #fff; }
.side .it .n { margin-left: auto; color: #8b8b94; font-size: 11px; }
.side svg { flex: none; }

/* Mail */
.mlist { flex: 1 1 214px; min-width: 152px; max-width: 240px; border-right: 1px solid #34343a; overflow: hidden; background: #1e1e20; }
.mlist .sort { padding: 5px 11px; font-size: 10.5px; color: #8b8b94; border-bottom: 1px solid #2c2c31; }
.mrow { position: relative; padding: 7px 11px 7px 23px; border-bottom: 1px solid #2a2a2f; }
/* Unread, because nobody replied to any of them. */
.mrow.unread::before {
  content: ""; position: absolute; left: 8px; top: 12px;
  width: 8px; height: 8px; border-radius: 50%; background: #3b82f6;
}
.mrow.unread.on::before { background: #fff; }
.mrow .l1 { display: flex; justify-content: space-between; align-items: baseline; }
.mrow .l1 b { font-size: 12px; color: #f0f0f4; font-weight: 700; }
.mrow .l1 span { font-size: 10.5px; color: #8b8b94; }
.mrow .l2 { font-size: 11.5px; color: #dcdce2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mrow .l3 { font-size: 11px; color: #8b8b94; line-height: 1.35; max-height: 2.7em; overflow: hidden; }
.mrow.on { background: #0a63ce; }
.mrow.on b, .mrow.on span, .mrow.on .l2, .mrow.on .l3 { color: #fff; }
.mread { flex: 1 1 220px; min-width: 0; padding: 13px 16px; overflow: hidden; min-width: 0; display: flex; flex-direction: column; }
.mread .hdr { display: flex; gap: 10px; align-items: flex-start; }
.mread .hdr .who { min-width: 0; }
.mread .when { margin-left: auto; font-size: 11px; color: #8b8b94; white-space: nowrap; }
.mread .av { width: 30px; height: 30px; border-radius: 50%; background: #55555e; color: #fff; display: grid; place-items: center; font-size: 12px; flex: none; }
.mread h4 { margin: 0; font-size: 13px; color: #f2f2f6; font-weight: 700; }
.mread .to { font-size: 11px; color: #8b8b94; }
.mread .sj { margin: 10px 0 8px; font-size: 12.5px; color: #f2f2f6; font-weight: 600; }
.mread p { margin: 0 0 7px; color: #c9c9d1; font-size: 12px; line-height: 1.55; }
.mread .cmp p { max-height: 5.5em; overflow: hidden; }
#rdBody { overflow: hidden; }
.mread { position: relative; }
.cmp { position: absolute; inset: 0; background: #1e1e20; display: flex; flex-direction: column; padding: 10px 14px 12px; }
.cmphead { display: flex; align-items: center; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid #34343a; }
.cmphead .ttl { font-size: 11.5px; color: #8b8b94; }
.cmp .row { display: flex; gap: 7px; font-size: 11.5px; color: #8b8b94; padding: 6px 0; border-bottom: 1px solid #2a2a2f; }
.cmp .row b { color: #e6e6ec; font-weight: 400; }
.cbody { flex: 1; min-height: 60px; padding: 10px 0; font-size: 12px; color: #c9c9d1; line-height: 1.5; overflow: hidden; white-space: pre-line; }
.sendbtn { display: inline-block; padding: 3px 13px; border-radius: 6px; background: #0a63ce; color: #fff; font-size: 11.5px; font-weight: 600; }
.sendbtn.hit { background: #0850a8; }

/* The sidebar can go. The message list cannot: it is what gets clicked, and
   hiding it turned every selection into a press on nothing followed by the
   reading pane changing on its own. It gets narrower and drops its preview
   lines instead. */
@container (max-width: 620px) {
  #wMail .side { display: none; }
}
@container (max-width: 470px) {
  #wMail .mlist { flex: 0 0 148px; min-width: 148px; max-width: 148px; }
  #wMail .mrow .l3 { display: none; }
  #wMail .mread { padding: 11px 12px; }
}

/* Terminal */
.term { flex: 1; background: #000; padding: 8px 11px; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; overflow: hidden; color: #e6e6e6; white-space: pre-wrap; }
.term .p { color: #4fd06a; }
.term .d { color: #7d7d7d; }
.term .w { color: #e5c07b; }
.term .g { color: #7fd1a0; }
.term .cur { display: inline-block; width: 6px; height: 12px; background: #e6e6e6; vertical-align: -2px; }
/* nvim */
.nv { flex: 1; background: #14161b; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; display: flex; flex-direction: column; overflow: hidden; }
.nv .buf { flex: 1; padding: 4px 0; overflow: hidden; }
.nv .ln { display: flex; }
.nv .ln .no { flex: 0 0 32px; text-align: right; padding-right: 9px; color: #4b5263; }
.nv .ln .tx { white-space: pre; color: #c8ccd4; }
.nv .ln.hl { background: #2f4a72; }
.nv .k { color: #c678dd; }
.nv .s { color: #98c379; }
.nv .t { color: #e5c07b; }
.nv .c { color: #5c6370; }
.nv .st { flex: 0 0 18px; background: #2c323c; color: #abb2bf; font-size: 10.5px; display: flex; align-items: center; padding: 0 8px; gap: 12px; }
.nv .st b { background: #98c379; color: #14161b; padding: 0 6px; border-radius: 2px; font-weight: 700; }

/* Chrome */
.cr { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.crtabs { height: 36px; flex: 0 0 36px; background: #202124; display: flex; align-items: flex-end; padding: 0 8px; gap: 10px; }
/* Centred against the strip, not sitting on its floor with the tabs. */
.crtabs .lights { align-self: center; margin: 0 14px 0 4px; }
.crtab { height: 30px; flex: 0 1 196px; min-width: 96px; border-radius: 8px 8px 0 0; display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 12px; color: #9aa0a6; }
.crtab { position: relative; }
.crtab.on { background: #35363a; color: #e8eaed; }
.crtab.on::before, .crtab.on::after {
  content: ""; position: absolute; bottom: 0; width: 8px; height: 8px; background: #35363a;
}
.crtab.on::before {
  left: -8px;
  -webkit-mask: radial-gradient(circle 8px at 0 0, transparent 8px, #000 8.5px);
  mask: radial-gradient(circle 8px at 0 0, transparent 8px, #000 8.5px);
}
.crtab.on::after {
  right: -8px;
  -webkit-mask: radial-gradient(circle 8px at 100% 0, transparent 8px, #000 8.5px);
  mask: radial-gradient(circle 8px at 100% 0, transparent 8px, #000 8.5px);
}
.crtab i { width: 14px; height: 14px; flex: none; display: grid; place-items: center; }
.crtab span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.crtab em { font-style: normal; opacity: .5; font-size: 14px; line-height: 1; }
.crtabs .plus { align-self: center; color: #9aa0a6; font-size: 17px; line-height: 1; padding: 0 9px; }
.crbar { height: 38px; flex: 0 0 38px; background: #35363a; display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.crbar .nav { color: #9aa0a6; display: grid; place-items: center; width: 22px; height: 22px; }
.crbar .avatar { width: 20px; height: 20px; border-radius: 50%; background: #8ab4f8; color: #202124; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.crbar .dots { color: #9aa0a6; font-size: 14px; line-height: 1; padding: 0 2px; }
.crurl { flex: 1; height: 28px; border-radius: 999px; background: #202124; display: flex; align-items: center; padding: 0 13px; font-size: 12px; color: #dadce0; gap: 8px; }
.crpage { flex: 1; background: #fff; color: #111; overflow: hidden; padding: 20px 24px; }

/* The pricing page, before and after */
.pp h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.02em; color: #111; }
.pp p.sub { margin: 0 0 16px; font-size: 12px; color: #6b7280; }
.pp select, .pp .fakeselect {
  width: 210px; height: 32px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 12px; color: #374151; display: flex; align-items: center; padding: 0 10px;
  justify-content: space-between; background: #fff;
}
.pp .cards { display: none; gap: 10px; }
.pp.after .cards { display: flex; }
.pp.after .fakeselect { display: none; }
.pp .card { flex: 1; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; }
.pp .card.best { border-color: #111; box-shadow: 0 0 0 1px #111; }
.pp .card .nm { font-size: 11px; color: #6b7280; font-weight: 600; }
.pp .card .pr { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 2px 0 6px; }
.pp .card ul { margin: 0; padding-left: 14px; font-size: 10.5px; color: #4b5563; line-height: 1.65; }
.pp .card .go { margin-top: 9px; height: 26px; border-radius: 6px; background: #111; color: #fff; font-size: 11px; display: grid; place-items: center; }

/* Numbers. Toolbar, sheet tabs, dark canvas, white table, as in the real one */
.nbtools { height: 42px; flex: 0 0 42px; display: flex; align-items: center; gap: 18px; padding: 0 14px; background: #2b2b2f; border-bottom: 1px solid #38383e; }
.nbtools .t { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #b7b7bf; font-size: 9px; }
.nbtools .r { margin-left: auto; display: flex; gap: 16px; }
.nbsheets { height: 24px; flex: 0 0 24px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #232326; border-bottom: 1px solid #34343a; font-size: 10.5px; color: #8b8b94; }
.nbsheets .on { color: #fff; background: #3d3d45; border-radius: 4px; padding: 1px 8px; }
.nbcanvas { flex: 1; background: #2a2a2d; padding: 14px; overflow: hidden; }
.tbl { background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.tr { display: flex; }
.tr > div { padding: 4px 8px; font-size: 11px; color: #1f2937; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
.tr .rn { flex: 0 0 26px; text-align: center; background: #f3f4f6; color: #6b7280; font-size: 10px; }
.tr .a { flex: 1; }
.tr .b { flex: 0 0 84px; text-align: right; }
.tr .c { flex: 0 0 74px; text-align: right; }
.tr.hd > div { background: #f3f4f6; color: #6b7280; font-weight: 700; font-size: 10px; }
.tr.sel > div { background: #dbeafe; }
.tr.drop .c { color: #b91c1c; font-weight: 700; }
.chart { margin-top: 12px; background: #fff; border-radius: 4px; padding: 10px 12px 8px; display: none; }
.chart.in { display: block; }
.chart .cap { font-size: 10px; color: #6b7280; font-weight: 700; margin-bottom: 6px; }
.bars { height: 68px; display: flex; align-items: flex-end; gap: 6px; }
.bars i { flex: 1; background: #3b82f6; border-radius: 2px 2px 0 0; }
.bars i.low { background: #ef4444; }

/* An empty field still has to have a size, or there is nowhere for the dot to
   go: a zero sized target cannot be measured, so it skips the click and pastes
   into a field it never visited. */
#cTo, #cSubj, .term .cmd { display: inline-block; min-width: 6px; min-height: 12px; }

/* A caret, wherever text is going in. Without one there is nothing to say the
   text is being entered rather than simply appearing. */
.car { display: inline-block; width: 1px; height: 1.05em; background: currentColor; vertical-align: -2px; margin-left: 1px; animation: blink 1.06s steps(1) infinite; }
.term .car { background: #e6e6e6; width: 6px; height: 12px; }
/* Clicking an address bar selects what is in it. */
.picked { background: #2d5fa8; color: #fff; border-radius: 2px; }
@keyframes blink { 50% { opacity: 0; } }

/* What Dot says while it is working, beside the dot doing it. The menu's
   surface at a smaller size: the same tint and the same material, with a
   fainter hairline, because the same line on a much smaller shape is most of
   what you see and would weigh more than the menu's does. */
.cap {
  position: absolute; z-index: 38; max-width: 250px;
  padding: 8px 11px; border-radius: 10px;
  background: rgba(30,30,34,.93);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: .6px solid rgba(255,255,255,.24);
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
  color: #e9e9ef; font-size: 12.5px; line-height: 1.4; letter-spacing: -.005em;
  left: 0; top: 0; transform: translate(-9999px, -9999px);
  opacity: 0; pointer-events: none;
  /* The same journey the dot takes, so it travels with it rather than
     arriving first. */
  transition: opacity 150ms ease, transform 500ms cubic-bezier(.32,.72,.3,1);
}
.cap.on { opacity: 1; }

/* ---- Dot ---- */

/* Two elements, and the reason is not decoration.
   The outer one carries the position and nothing else. The inner one carries
   the look and the click. Squeezing the same element that holds the position
   drags the dot a quarter of the way to the top left corner of the screen for
   the length of the animation and then releases it, because `scale` is a
   standalone property and the browser applies it before the transform that
   holds the coordinates. That was the whiplash. */
.worker {
  position: absolute; top: 0; left: 0; width: 15px; height: 15px;
  opacity: 0; z-index: 40; pointer-events: none;
  transition: transform 500ms cubic-bezier(.32,.72,.3,1), opacity 160ms ease;
}
.worker i {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); position: relative;
}
/* Dark, just outside the disc: nothing on a dark background, an outline on a
   light one. The same trick the app uses. */
.worker i::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  background: rgba(0,0,0,.2); z-index: -1;
}
.worker.show { opacity: 1; }
.worker.press i { animation: press 170ms ease-out; }
@keyframes press { 50% { transform: scale(.76); } }

.menu {
  position: absolute; z-index: 39; width: min(500px, 84vw);
  border-radius: 10px; background: rgba(30,30,34,.93);
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  border: .7px solid rgba(255,255,255,.42);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  padding: 14px 16px 12px; color: #fff;
  opacity: 0; pointer-events: none; transform-origin: center;
  transition: opacity 140ms ease, transform 230ms cubic-bezier(.4,0,.15,1);
  transform: scale(.034);
}
.menu.open { opacity: 1; transform: scale(1); }
.menu .said { font-size: 12.5px; color: #c9c9d1; margin-bottom: 8px; white-space: pre-line; display: none; }
.menu .said.on { display: block; }
.menu .ask { font-size: 15px; min-height: 46px; max-height: 168px; overflow-y: auto; letter-spacing: -.01em; }
.menu .ask::-webkit-scrollbar { width: 7px; }
.menu .ask::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 4px; }
.menu .bar { display: inline-block; width: 1px; height: 15px; background: #fff; vertical-align: -2px; opacity: 0; }
.menu .bar.on { opacity: 1; animation: blink 1.06s steps(1) infinite; }
.menu .foot { display: flex; align-items: center; margin-top: 8px; }
.menu .foot .model {
  font-size: 12px; color: rgba(255,255,255,.6); font-family: inherit;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.menu .foot .model:focus { outline: none; color: #fff; }
.menu .foot .send { cursor: pointer; }
.menu .ask, .menu #askText { outline: none; }
.menu #askText[contenteditable] { cursor: text; }
.menu .foot .send { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; }

@media (max-width: 980px) {
  /* One column, read top to bottom, with the machine under the writing rather
     than beside it. */
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 30px; }
  .intro { max-width: none; }
  .stage { height: min(56svh, 480px); min-height: 320px; }
  .legal-links { text-align: center; }
  .legal-links a, .legal-links .rights { margin: 0 .55rem; }
}
@media (max-height: 720px) {
  .stage { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .worker, .win, .menu { transition: none !important; }
  .worker.press i { animation: none; }
  .menu .bar.on { animation: none; }
}

/* Legal pages */
main.legal { max-width: 42rem; margin: 0 auto; padding: 7.5rem 1.5rem 6rem; }
main.legal h1 { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.026em; margin: 0 0 .5rem; }
main.legal h2 { font-size: 1.15rem; margin: 2.5rem 0 .75rem; }
main.legal h3 { font-size: 1rem; margin: 1.75rem 0 .5rem; }
main.legal p, main.legal li { color: #333; }
main.legal a { color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
code { font-family: var(--mono); font-size: .9em; background: #f4f4f4; padding: .1em .35em; border-radius: 4px; }
pre { overflow-x: auto; background: #f7f7f7; padding: 1rem; border-radius: 8px; font-family: var(--mono); font-size: .85rem; }
ul { padding-left: 1.25rem; }
/* The row of text links that used to sit inside the legal documents is gone;
   the pill at the top replaced it. What the bare `nav` rules left behind was a
   three rem bottom margin under the bar and a one rem right margin on every
   item in it, which is where the sixteen pixels of unexplained air between the
   links came from, and why collapsing one of them never closed the gap by the
   amount it was worth. */

/* The plans.
   Its own page rather than the legal shell it was borrowing, which is why it
   read as a Terms page with cards wedged into it. Same language as the front:
   black on white, the wordmark, and air. */
/* The side padding matches the hero's exactly, so the wordmark here starts
   where the wordmark on the front page starts, and both sit above a footer at
   the same inset. A near-match reads as a mistake more loudly than a wide gap
   would. */
.plans { max-width: 1080px; margin: 0 auto; padding: clamp(104px, 12vh, 132px) clamp(24px, 4vw, 64px) 96px; }
.plans header { max-width: 34rem; margin-inline: auto; text-align: center; }
/* `.plans .back` was a second wordmark, big, with a disc for its o, said to be
   kept for the legal pages' own way back. No page has carried `class="back"`
   since the bar above started carrying the mark, so it was styling nothing, and
   what it was styling no longer exists. */
.plans h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.9rem); letter-spacing: -0.026em; line-height: 1.1; font-weight: 600; }

/* The plans, on a surface.
   The band is dark and the cards are white paper on it, which is the same
   arrangement as the front page: dark is where the machine is, white is where
   the words are. The hairline stays, but it inverts with the card, so it is a
   faint dark line on white rather than a faint white line on dark. */
/* One surface with four columns on it, hairlined apart.
   It was four white cards floating inside a black box, which is a shape the
   application never makes: nothing in Dot is a card inside a card. The
   composer is one material with its contents laid directly on it, so this is
   too, and the columns are divided by the same hairline the composer's own
   edge is drawn in. */
.band {
  background: var(--slab); border-radius: var(--r); overflow: hidden;
  margin: 2.6rem 0 1.4rem; font-family: var(--ui);
  box-shadow: inset 0 0 0 1px var(--edge);
}
/* The hairlines are the gaps: a one pixel grid gap with the line's colour
   behind it and the surface in front. Drawn as borders on each column instead,
   they were right at four across and wrong at two and at one, because which
   edge a column needs depends on where it wrapped to. */
.tiers {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--edge);
}
.tier {
  background: var(--slab);
  padding: clamp(24px, 2.6vw, 32px) clamp(18px, 2vw, 26px);
  display: flex; flex-direction: column; color: #fff; text-align: left;
}
/* The one that is picked out, and later the one you are on. A lift in the
   surface rather than a ring around it, which is how a selected row reads in
   `ChatList`. */
.tier.best, .tier.current { background: #24242a; }
.tier h2 {
  margin: 0; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-slab-faint); font-weight: 600;
}
.tier .price {
  font-size: 1.9rem; font-weight: 600; letter-spacing: -.03em; margin: .5rem 0 .1rem;
}
.tier .price span { font-size: .76rem; font-weight: 400; color: var(--on-slab-faint); letter-spacing: 0; }
/* The first line is the only one that differs between plans, so it is the only
   one in full white. */
.tier .has { list-style: none; margin: 1.3rem 0 1.7rem; padding: 0; }
.tier .has li {
  position: relative; padding-left: 15px; margin-bottom: .6rem;
  font-size: .82rem; line-height: 1.45; color: var(--on-slab);
}
.tier .has li:first-child { color: #fff; }
.tier .has li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .3);
}
.tier .has li:first-child::before { background: #fff; }
/* `Brand.PillButton`: white with dark lettering, the same as the send disc and
   the same as the bar's, so the thing you press looks the same everywhere. */
.tier .pick {
  margin-top: auto; display: block; text-align: center; text-decoration: none;
  padding: 10px 0; border-radius: 999px; background: #fff; color: var(--ink);
  font-size: .82rem; font-weight: 600; transition: opacity 150ms ease;
}
.tier .pick:hover { opacity: .88; }
/* Only cancelling, which should not compete with the plan next to it. */
.tier .pick.quiet {
  background: none; color: var(--on-slab); box-shadow: inset 0 0 0 1px var(--edge);
}
.tier .pick.quiet:hover { color: #fff; opacity: 1; }
/* What somebody already pays for. Not a button, because there is nothing to
   press: it is a label shaped like the thing it replaced, so the row keeps its
   footing. */
.tier .pick.current {
  background: none; box-shadow: none; color: var(--on-slab-faint);
  font-weight: 400; cursor: default;
}
.tier .pick.current:hover { opacity: 1; color: var(--on-slab-faint); }
.vat { font-size: .82rem; color: var(--faint); margin: 0 auto .7rem; max-width: 40rem; text-align: center; }
.vat a { color: var(--muted); text-decoration-color: var(--line); text-underline-offset: 2px; }
.vat a:hover { color: var(--ink); text-decoration-color: var(--ink); }

@media (max-width: 860px) {
  .tiers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .tiers { grid-template-columns: 1fr; }
  .plans .back { font-size: 2.2rem; }
}


/* ---- The page below the fold, which is where the case gets made ---- */

/* A scene. Centred, one headline at the size of a headline, one line under it,
   and a picture. The old arrangement was this file's `.pitch`: a left-aligned
   column with a small heading, repeated five times, so five different things
   looked like one thing said five times at different lengths. */
.scene {
  padding: clamp(88px, 11vw, 168px) clamp(24px, 4vw, 64px);
  text-align: center;
}
.scene h2 {
  margin: 0 auto; max-width: 22ch;
  font-size: clamp(1.8rem, 4vw, 2.9rem); font-weight: 600;
  letter-spacing: -0.026em; line-height: 1.1;
}
.scene .sub {
  margin: 1.1rem auto 0; max-width: 33rem;
  font-size: clamp(1rem, 1.4vw, 1.1rem); color: var(--muted);
  letter-spacing: -0.012em; line-height: 1.55;
}
/* Dark is where the machine is and white is where the words are, which is the
   arrangement the pricing band and the windows in the hero already use. It is
   also what stops six white sections reading as one long one. */
.scene.dark { background: var(--slab); color: #fff; }
.scene.dark .sub { color: var(--on-slab); }
.scene.dark .slot { box-shadow: var(--lift-slab), inset 0 0 0 1px var(--edge); }
.scene.tint { background: #f6f6f7; }
/* A plate: the painting at full strength with the writing laid over it, rather
   than the painting washed out to a tint. Washed, it read as a smudge behind
   the words and did neither of them any good. Jean Charles Cazin,
   "Landscape", Art Institute of Chicago 874, public domain. */
.scene.plate {
  background-image:
    linear-gradient(rgba(18,16,14,.55), rgba(18,16,14,.68)),
    url(/art-dunes.jpg);
  background-size: cover; background-position: center 56%;
  color: #fff;
}
.scene.plate .sub { color: rgba(255,255,255,.72); }

/* A band of painting between two things that are both rectangles. Nothing is
   written on these, so they are shown at full strength, and where each one
   sits was decided by how dark it is rather than by what it is of.

     art-hills  George Inness, "Catskill Mountains", 1870, AIC 68388
                the front page, above the last button
     art-field  George Inness, "After a Summer Shower", 1894, AIC 64715
                the pricing page, above the footer
     art-water  Camille Corot, "Landscape", AIC 877
                the policy pages, where a dark picture is right at the end of
                a long read and was wrong under a price list
     art-dunes  Jean Charles Cazin, "Landscape", AIC 874, the plate above

   All four from the Art Institute of Chicago's open access collection, which
   releases them CC0. No attribution is required, which is why none of it is on
   the page and all of it is here. */
.art { height: clamp(170px, 23vw, 330px); overflow: hidden; background: #d9d5cc; }
.art img { border-radius: 0; }
.art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 56%; }
/* The Corot is dark at the bottom and open at the top, so its band is cropped
   higher. A crop is per painting; there is no general right answer. */
.art.high img { object-position: center 34%; }
/* Nothing under the line but a button. */
.scene.tight { padding-block: clamp(56px, 6.5vw, 92px); }

.scene .download, .scene .slot, .scene .cases, .scene .qs { margin-top: clamp(30px, 4vw, 52px); }
.download.light { background: #fff; color: var(--ink); }

/* ---- The recordings ---- */

/* A slot is a hole of a known shape with a recording in it, and it is `hidden`
   until the recording says it can play. The shape is declared here rather than
   coming from the file, so a clip that is the wrong size is letterboxed by us
   instead of moving the rest of the page when it loads. */
.slot {
  position: relative; overflow: hidden; background: #0a0a0a;
  border-radius: var(--r); aspect-ratio: 4 / 3; box-shadow: var(--lift);
}
.slot.big { aspect-ratio: 16 / 9; max-width: 1060px; margin-inline: auto; }
.clip { display: block; width: 100%; height: 100%; object-fit: cover; }

.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 34px); max-width: 1060px; margin-inline: auto; }
.case { margin: 0; }
/* The thing somebody actually types. It is the whole of the case: the
   paragraph that used to sit under it explained the picture above it. */
.case figcaption {
  font-size: .97rem; letter-spacing: -0.015em; line-height: 1.4; color: var(--muted);
}
.case .slot + figcaption { margin-top: 1rem; }

/* ---- What it does with the screen ---- */

/* ---- The answers ---- */

/* Closed by default and one at a time. Ten answers laid out flat is a wall
   somebody scrolls past; ten questions is a list somebody reads. Centred as a
   block, and left-aligned inside it, because centred prose is unreadable. */
/* Rows, with air between them. One continuous list read as a form to be
   filled in; the same rows spaced apart read as ten separate things you can
   ask. The hairline and the ten point corner are the application's, and there
   is no shadow: ten shadows in a column is ten objects hovering. */
.qs { max-width: 42rem; margin-inline: auto; text-align: left; display: grid; gap: 8px; }
.qs details {
  background: #f4f4f5; border: 0; border-radius: var(--r);
  transition: background 140ms ease;
}
.qs details:hover { background: #eeeef0; }
.qs details[open] { background: #f4f4f5; }
.qs summary {
  list-style: none; cursor: pointer; padding: 16px 44px 16px 20px; position: relative;
  font-size: .94rem; font-weight: 500; letter-spacing: -0.014em;
  transition: background 140ms ease;
}

.qs summary::-webkit-details-marker { display: none; }
.qs summary::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
  transform: rotate(45deg); transition: transform 180ms ease, border-color 180ms ease;
}
.qs summary:hover::after { border-color: var(--ink); }
.qs details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }

.qs details p { margin: -2px 20px 18px; font-size: .88rem; color: var(--muted); line-height: 1.55; }
.qs details p a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 2px; }
.qs details p a:hover { text-decoration-color: var(--ink); }

/* ---- The button again, at the end ---- */

.scene .needs { margin-top: .9rem; }
@media (max-width: 720px) {
  .cases { grid-template-columns: 1fr; gap: 28px; }
  .scene h2 { max-width: none; }
}
@media (max-width: 560px) {
  /* Two links and a button. The anchors into the page are for somebody with a
     page in front of them, not somebody holding a phone. */
  .topnav a[href^="#"], .topnav a[href="/#faq"] { display: none; }
  .top { padding-left: 14px; gap: 12px; }
  .topnav > * + * { margin-left: 12px; }
}

/* The same answers on the pricing page, which is a document rather than a
   sequence of full-width sections, so it brings its own heading and spacing. */
.plans-faq { margin: clamp(48px, 6vw, 84px) 0 2.6rem; text-align: center; }
.plans-faq .qs { margin-top: 1.9rem; }
.plans-faq .faq-h {
  margin: 0 auto; font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 600; letter-spacing: -0.026em; line-height: 1.1;
}

@media (max-width: 860px) {
  /* `.cases` is here rather than in the 980 block with the rest of the phone
     layout, and that is not tidiness, it is the fix. The rule that sets three
     columns is written further down this file than that block, so it won a tie
     it should have lost and the three cases stayed three columns wide on a
     phone. Long words in a column narrower than they are pushed the document
     out past the window, which is why the headline was cut off on the right on
     every phone that has ever opened this page. */
  .cases { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 560px) {
  /* Two links and a button. The anchors into the page are for somebody with a
     page in front of them, not somebody holding a phone. */
  .topnav a[href^="#"], .topnav a[href="/#faq"] { display: none; }
  .top { padding-left: 14px; gap: 12px; }
  .topnav > * + * { margin-left: 12px; }
}