/* Jelly's marketing site: white mail on a cool grey page, thin ink, one
   strawberry primary, blueberry notes. Tokens from DESIGN.md. */

:root {
  --page: hsl(240 5% 98.5%);
  --sheet: #fff;
  --sheet-2: hsl(240 5% 95.5%);
  --line: hsl(240 5% 90%);
  --line-strong: hsl(240 5% 65%);
  --ink: hsl(240 5% 15%);
  --muted: hsl(240 5% 38%);
  --faint: hsl(240 5% 44%);
  --hairline: hsl(240 5% 10% / 0.125);
  --hover: hsl(240 5% 65% / 0.2);
  --quiet: hsl(240 5% 65% / 0.125);

  --berry: hsl(342 75% 55%);
  --berry-fill: hsl(342 72% 50%);
  --berry-strong: hsl(342 70% 46%);
  --berry-soft: hsl(342 95% 95%);

  --note: hsl(205 90% 93%);
  --note-line: hsl(205 80% 80%);
  --note-ink: hsl(205 88% 22%);

  --wash-blue: hsl(205 90% 93%);
  --edge-blue: hsl(205 88% 22%);
  --wash-lemon: hsl(45 90% 92%);
  --edge-lemon: hsl(45 88% 26%);
  --wash-stone: hsl(240 5% 95%);
  --edge-stone: hsl(240 5% 65%);
  /* Brand new wears the app's accent (#583): strawberry, not blueberry. */
  --wash-berry: hsl(342 95% 95%);
  --edge-berry: hsl(342 75% 55%);

  --mint-fill: hsl(135 60% 90%);
  --mint-ink: hsl(135 60% 20%);
  --mint-soft: hsl(135 60% 96%);
  --ok: hsl(140 60% 32%);
  --amber: hsl(38 90% 38%);
  --amber-soft: hsl(45 95% 88%);

  --face: hsl(240 5% 92%);
  --face-ink: hsl(240 5% 30%);

  --lift: 0 4px 8px -2px hsl(240 5% 10% / 0.075), 0 8px 20px -4px hsl(240 5% 10% / 0.075), 0 24px 64px -8px hsl(240 5% 10% / 0.075);
  --card: 0 0 0 1px hsl(240 5% 10% / 0.075), var(--lift);

  --fs-2xs: 0.625rem;
  --fs-xs: 0.75rem;
  --fs-s: 0.875rem;
  --fs-m: 1rem;
  --fs-l: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;

  --sp-3xs: 2px;
  --sp-2xs: 4px;
  --sp-xs: 8px;
  --sp-s: 12px;
  --sp-m: 16px;
  --sp-l: 24px;
  --sp-xl: 32px;
  --sp-2xl: 40px;
  --sp-3xl: 48px;
  --sp-4xl: 64px;
  --sp-5xl: 80px;

  --app-face: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --spring: cubic-bezier(0.2, 1.5, 0.4, 1);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: var(--sp-2xl);
  --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-l);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--app-face);
  font-size: var(--fs-m);
  line-height: 1.5;
  caret-color: var(--berry);
  overflow-x: hidden;
}

::selection { background: var(--berry-soft); color: var(--ink); }

h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
b, strong { font-weight: 600; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--berry-fill);
  outline-offset: 2px;
  border-radius: 4px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite .fill { fill: currentColor; stroke: none; }

.ico {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--s { width: 14px; height: 14px; }
.ico--xs { width: 12px; height: 12px; stroke-width: 2.2; }

.skip {
  position: absolute;
  left: var(--sp-m);
  top: -100px;
  background: var(--ink);
  color: #fff;
  padding: var(--sp-xs) var(--sp-m);
  border-radius: 8px;
  z-index: 50;
}
.skip:focus { top: var(--sp-m); }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[hidden] { display: none !important; }

.js-only, .js-only-block, .js-inline { display: none; }
.js .js-only { display: flex; }
.js .js-only-block { display: block; }
.js .js-inline { display: inline; }

.muted { color: var(--muted); }

/* ---------- Header: Jelly's own bar ---------- */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-m);
  padding: var(--sp-s) var(--gutter);
  background: var(--sheet);
  border-bottom: 1px solid var(--hairline);
}

.brand { display: flex; align-items: center; gap: var(--sp-xs); text-decoration: none; color: var(--ink); }
.brand .wordmark { width: 72px; height: auto; aspect-ratio: 1410 / 564; }

.site-nav ul { display: flex; align-items: center; gap: var(--sp-2xs); }
.site-nav a:not(.pill) {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--sp-s);
  border-radius: 999px;
  font-size: var(--fs-s);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
}
.site-nav a:not(.pill):hover { background: var(--hover); }
.site-nav li:last-child { margin-left: var(--sp-xs); }

/* ---------- Buttons ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  min-height: 48px;
  padding: 0 var(--sp-l);
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 var(--fs-m) / 1 var(--app-face);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s var(--out), box-shadow 0.15s;
}
.pill--primary { background: var(--berry-fill); color: #fff; box-shadow: 0 2px 6px -2px hsl(342 70% 30% / 0.4); }
.pill--primary:hover { background: var(--berry-strong); }
.pill--primary:active { transform: translateY(1px); }
.pill--ink { background: var(--sheet); color: var(--ink); border-color: var(--hairline); }
.pill--ink:hover { background: var(--sheet-2); }
.pill--small { min-height: 36px; padding: 0 var(--sp-m); font-size: var(--fs-s); }
.pill--wide { width: 100%; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  min-height: 36px;
  padding: 0 var(--sp-m);
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--sheet);
  color: var(--ink);
  font: 600 var(--fs-s) / 1 var(--app-face);
  cursor: pointer;
  transition: background-color 0.15s, transform 0.2s var(--spring);
}
.btn:hover { background: var(--sheet-2); }
.btn:active { transform: scale(0.97); }
.btn .ico { width: 16px; height: 16px; }
.btn--primary { background: var(--berry-fill); border-color: transparent; color: #fff; }
.btn--primary:hover { background: var(--berry-strong); }
.btn--ink { min-height: 44px; padding: 0 var(--sp-l) 0 var(--sp-xs); box-shadow: var(--card); border-color: transparent; font-size: var(--fs-m); }
.btn--ink[aria-pressed="true"] { background: var(--sheet-2); }

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--sp-2xs);
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: transparent;
  font: 500 var(--fs-2xs) / 1 var(--app-face);
  color: var(--muted);
  flex: none;
  vertical-align: middle;
}

/* ---------- Display type (marketing only): the system face ---------- */

.display {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.0125em;
  text-wrap: balance;
}
.display--m { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); line-height: 1.08; }

.lede { font-size: var(--fs-l); color: var(--muted); max-width: 34em; text-wrap: pretty; }
.lede b { color: var(--ink); }

.ctas { display: flex; flex-wrap: wrap; gap: var(--sp-s); }
.ctas--center { justify-content: center; }

/* ---------- Hero ---------- */

.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-3xl) var(--gutter) var(--sp-4xl);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-3xl);
  align-items: start;
}
.hero-copy { display: grid; gap: var(--sp-l); align-content: start; padding-top: var(--sp-4xl); }
.hero-copy .ctas { margin-top: var(--sp-xs); }

.nudge {
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-s);
  color: var(--muted);
}
.nudge b { color: var(--ink); }
/* A hint to try something is a sticker on the page: strawberry-pale with
   a white die-cut edge, stuck on a little crooked, so it gets seen. */
.nudge--sticker > span {
  display: inline-block;
  padding: var(--sp-xs) var(--sp-s);
  border: 3px solid var(--sheet);
  border-radius: 12px;
  background: var(--berry-soft);
  box-shadow: 0 0 0 1px var(--hairline), 0 6px 14px -6px hsl(240 5% 10% / 0.35);
  color: var(--ink);
  font-weight: 500;
  transform: rotate(-3deg);
}
.nudge--sticker > span b { color: var(--berry-strong); }
.hero { position: relative; }
.nudge-arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
  fill: none;
  stroke: var(--berry);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-demo { display: grid; gap: var(--sp-s); }

/* ---------- The miniature app ---------- */

.stage { position: relative; padding-top: var(--sp-3xl); }

.app {
  position: relative;
  z-index: 1;
  background: var(--sheet);
  border-radius: 14px;
  box-shadow: var(--card);
  font-family: var(--app-face);
  font-size: var(--fs-s);
  color: var(--ink);
}

.app-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  padding: var(--sp-xs) var(--sp-m);
  border-bottom: 1px solid var(--hairline);
}
.app-team { font-weight: 700; font-size: var(--fs-s); white-space: nowrap; }
.app-search {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  min-height: 32px;
  padding: 0 var(--sp-s);
  border-radius: 999px;
  background: var(--quiet);
  color: var(--faint);
  font-size: var(--fs-s);
  flex: 0 1 12rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.app-search .ico { width: 15px; height: 15px; }
.app-tools { margin-left: auto; display: flex; align-items: center; gap: var(--sp-m); color: var(--muted); }

.app-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-s);
  padding: var(--sp-m) var(--sp-m) var(--sp-s);
}
.app-title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; }
.app-meta { font-size: var(--fs-xs); color: var(--faint); }

.face {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg, var(--face));
  color: var(--face-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  flex: none;
  line-height: 1;
  letter-spacing: 0.02em;
}
.face[style] { color: #fff; }
.face--xs { width: 20px; height: 20px; font-size: 0.5rem; }
.face--s { width: 24px; height: 24px; font-size: var(--fs-2xs); }
.face--m { width: 40px; height: 40px; font-size: var(--fs-s); }
.face--l { width: 48px; height: 48px; font-size: var(--fs-m); }
.face--you { background: var(--berry-soft); color: var(--berry-strong); }
.face--sam { --bg: #3949ab; background: var(--bg); color: #fff; }
.face--priya { --bg: #8e24aa; background: var(--bg); color: #fff; }

/* Sections: a heading in a wash, a straight dark left edge */
.sec-head {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-m);
  font-size: var(--fs-m);
  font-weight: 600;
  background: var(--wash-blue);
  box-shadow: inset 3px 0 0 var(--edge-blue);
  border-bottom: 1px solid var(--line);
}
.sec-head--berry { background: var(--wash-berry); box-shadow: inset 3px 0 0 var(--edge-berry); }
.sec-head--lemon { background: var(--wash-lemon); box-shadow: inset 3px 0 0 var(--edge-lemon); }
.sec-head--stone { background: var(--wash-stone); box-shadow: inset 3px 0 0 var(--edge-stone); }
.sec-head .ico { color: var(--muted); }
.sec-count { font-size: var(--fs-s); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.sec-head .face { margin-left: auto; }
.is-folded { transform: rotate(-90deg); }

.ledger { padding-bottom: var(--sp-xs); border-radius: 0 0 14px 14px; }
.ledger .sec + .sec { margin-top: var(--sp-xs); }

.rows { padding: 0 var(--sp-m); }
.row {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: var(--sp-xs);
  padding: var(--sp-s) 0;
  border-bottom: 1px solid var(--line);
  background: var(--sheet);
}
.row:last-child { border-bottom: 0; }
.dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 30px; }
.is-unread .dot { background: var(--berry); }
.row-from { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.row-subj { font-size: var(--fs-m); font-weight: 600; line-height: 1.3; margin-top: var(--sp-3xs); }
.is-unread .row-subj { font-weight: 700; }
.row-subj a { text-decoration: none; }
.row-subj a:hover { text-decoration: underline; }
.row-n {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  margin-left: var(--sp-2xs);
  padding: 0 var(--sp-2xs);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: var(--fs-xs);
  font-weight: 600;
  vertical-align: 1px;
}
.row-prev {
  margin-top: var(--sp-3xs);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-acts { margin-top: var(--sp-xs); display: flex; gap: var(--sp-xs); }
.row-side { display: flex; align-items: flex-start; gap: var(--sp-xs); color: var(--faint); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-side time { line-height: 28px; }
.row-side .face { margin-top: 2px; }
.faces { display: flex; }
.faces .face + .face { margin-left: -6px; box-shadow: 0 0 0 2px var(--sheet); }

.igt {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  min-height: 28px;
  padding: 0 var(--sp-s);
  border: 0;
  border-radius: 999px;
  background: var(--berry-fill);
  color: #fff;
  font: 600 var(--fs-s) / 1 var(--app-face);
  cursor: pointer;
  transition: background-color 0.15s, transform 0.2s var(--spring);
}
button.igt:hover { background: var(--berry-strong); }
button.igt:active { transform: scale(0.94); }

.empty { padding: var(--sp-m); color: var(--muted); }
.empty b { color: var(--ink); }

.caption {
  font-size: var(--fs-s);
  color: var(--muted);
  min-height: 3em;
  padding: 0 var(--sp-2xs);
  text-wrap: pretty;
}
.caption b { color: var(--ink); }
.caption a,
.linkish {
  color: var(--berry-strong);
  font-weight: 600;
}
.linkish {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  cursor: pointer;
}

/* ---------- The mascot, behind the app's top edge ---------- */

.peek {
  position: absolute;
  z-index: 0;
  right: 56px;
  top: 0;
  width: 76px;
  height: 92px;
  transform: translateY(26px);
  transition: transform 0.55s var(--spring);
}
.peek .mascot { width: 76px; height: 92px; transform-origin: 50% 90%; }
.peek.is-up { transform: translateY(-28px); }
/* Hovered while hiding: up a little, to say "Try it out!" */
.peek.is-peeking { transform: translateY(2px); }
.peek.is-hop .mascot { animation: hop 0.6s var(--out); }
.lid { opacity: 0; fill: #e2366a; }
.lid path { fill: none; stroke: #242428; stroke-width: 16; stroke-linecap: round; }
.is-winking .lid { opacity: 1; }

.bubble {
  position: absolute;
  right: calc(100% + var(--sp-xs));
  top: var(--sp-xs);
  padding: var(--sp-2xs) var(--sp-s);
  border-radius: 12px 12px 4px 12px;
  background: var(--sheet);
  box-shadow: var(--card);
  font: 600 var(--fs-s) / 1.4 var(--app-face);
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transform-origin: 100% 100%;
  transition: opacity 0.2s, transform 0.35s var(--spring);
}
.peek.is-talking .bubble { opacity: 1; transform: none; }
.peek.is-peeking .bubble { opacity: 1; transform: none; top: calc(-1 * var(--sp-xs)); }
.bubble { pointer-events: none; }

@keyframes hop {
  0% { transform: none; }
  35% { transform: translateY(-10px) rotate(-8deg); }
  65% { transform: translateY(0) rotate(5deg); }
  100% { transform: none; }
}

/* ---------- Blocks ---------- */

.block {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-5xl) var(--gutter) 0;
}
.block-head { display: grid; gap: var(--sp-m); margin-bottom: var(--sp-2xl); max-width: 46rem; }

/* ---------- A conversation, drawn the way Jelly draws one ---------- */

.convo-grid {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--sp-3xl);
  align-items: start;
}

/* z-index: sticky makes a stacking context, and the hint's arrow inside it
   has to cross over the conversation beside it. */
.steps-col { position: sticky; top: var(--sp-l); z-index: 2; display: grid; gap: var(--sp-s); }
.steps { display: grid; gap: var(--sp-xs); counter-reset: step; }
.steps li { counter-increment: step; }
.step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--sp-s);
  width: 100%;
  padding: var(--sp-s) var(--sp-m) var(--sp-s) var(--sp-s);
  border: 0;
  border-radius: 12px;
  background: none;
  text-align: left;
  transition: background-color 0.3s, box-shadow 0.3s;
}
button.step { cursor: pointer; }
button.step:hover { background: var(--hover); }
.step-text { display: grid; gap: var(--sp-3xs); }
.step-title { font-size: var(--fs-m); font-weight: 600; }
.step-desc { font-size: var(--fs-s); color: var(--muted); }
.step-desc b { color: var(--note-ink); }
.step #convo-nudge { margin-top: var(--sp-xs); }
.step-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  color: transparent;
  font: 600 var(--fs-xs) / 1 var(--app-face);
}
.step-mark::before { content: counter(step); color: var(--muted); }
.step-mark .ico { display: none; width: 16px; height: 16px; stroke-width: 2.5; }

.js .step .step-title { color: var(--muted); }
.js .step .step-desc { color: var(--faint); }
.js .step.is-current .step-title { color: var(--ink); }
.js .step.is-current .step-desc { color: var(--muted); }
.js .step.is-current { background: var(--sheet); box-shadow: var(--card); }
.js .step.is-current .step-mark { border-color: var(--berry-fill); }
.js .step.is-current .step-mark::before { color: var(--berry-strong); }
.js .step.is-done .step-mark { background: var(--berry-fill); border-color: var(--berry-fill); color: #fff; }
.js .step.is-done .step-mark::before { content: none; }
.js .step.is-done .step-mark .ico { display: block; }

.again-wrap { padding-left: var(--sp-s); }

/* On a phone the steps and the conversation split up: under each step, a
   slice of the same conversation showing just that step. Wider, there is
   one conversation beside the steps, and the slices are not drawn. */
.slice { display: none; }

.stage--convo { min-width: 0; }
.peek--convo { right: 96px; }

.convo { padding: var(--sp-l); min-height: 34rem; }
.convo--slim { min-height: 0; padding: var(--sp-m) var(--sp-l) var(--sp-l); }
.c-subj { font-size: var(--fs-xl); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.c-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  margin-top: var(--sp-s);
  padding: var(--sp-xs) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-s);
  font-weight: 500;
}
.assign-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  min-height: 30px;
  padding: 0 var(--sp-s) 0 var(--sp-xs);
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-weight: 600;
  white-space: nowrap;
}
.assign-pill .ico { width: 16px; height: 16px; }
.assign-pill .ico--xs { width: 11px; height: 11px; color: var(--muted); }
.act {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  min-height: 30px;
  padding: 0 var(--sp-xs);
  border-radius: 8px;
  white-space: nowrap;
}
.act .ico { width: 16px; height: 16px; }
.act .ico--xs { width: 11px; height: 11px; color: var(--muted); }
.act-word { display: inline-flex; align-items: center; gap: var(--sp-2xs); }
.act--claim { color: var(--berry-strong); font-weight: 600; }
.act--more { margin-left: auto; }
button.act.is-next { animation: nudge 1.8s ease-in-out infinite; }
.bar-rule { width: 1px; height: 20px; margin: 0 var(--sp-xs); background: var(--line); }

.thread { display: grid; gap: var(--sp-s); margin-top: var(--sp-l); }

.msg {
  position: relative;
  z-index: 1;
  border-radius: 12px;
  background: var(--sheet);
  box-shadow: var(--card);
  padding: var(--sp-s) var(--sp-m) var(--sp-m) var(--sp-s);
}
.msg-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-s); align-items: start; }
.msg-from { font-size: var(--fs-m); line-height: 1.35; overflow-wrap: anywhere; }
.msg-from span { color: var(--faint); font-size: var(--fs-s); }
.msg-to { font-size: var(--fs-s); color: var(--faint); margin-top: var(--sp-3xs); overflow-wrap: anywhere; }
.msg-tools { display: flex; align-items: center; gap: var(--sp-s); color: var(--faint); font-size: var(--fs-s); }
.msg-tools .ico { width: 16px; height: 16px; color: var(--muted); }
.msg-body {
  margin: var(--sp-s) 0 0 calc(-1 * var(--sp-s));
  padding: var(--sp-m) 0 0 var(--sp-l);
  border-top: 1px dashed var(--line);
  font-size: var(--fs-m);
  max-width: 68ch;
}
.msg-body p + p { margin-top: var(--sp-xs); }
.sent-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  min-height: 20px;
  margin-left: var(--sp-2xs);
  padding: 0 var(--sp-xs);
  border-radius: 999px;
  background: var(--mint-fill);
  color: var(--mint-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.sent-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* The spine: the line down the thread, faces sitting on it */
.spine { position: relative; display: grid; gap: var(--sp-s); }
.spine::before {
  content: "";
  position: absolute;
  left: 23px;
  top: calc(-1 * var(--sp-s));
  bottom: calc(-1 * var(--sp-s));
  width: 2px;
  background: var(--line);
}
.spine:empty { display: none; }
.spine-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  min-height: 32px;
}
.spine-row > .face { justify-self: center; box-shadow: 0 0 0 3px var(--sheet); }
.spine > .msg { margin: 0; }

.note { align-items: start; }
.note > .face { margin-top: var(--sp-xs); }
.note-box {
  justify-self: start;
  max-width: 100%;
  padding: var(--sp-xs) var(--sp-s) var(--sp-s);
  border-radius: 10px;
  background: var(--note);
  color: var(--ink);
  font-size: var(--fs-m);
}
.note-head { display: flex; align-items: center; gap: var(--sp-s); font-size: var(--fs-s); margin-bottom: var(--sp-2xs); }
.note-head b { font-weight: 600; }
.note-head time { font-size: var(--fs-xs); color: var(--muted); margin-left: auto; }
.note-head .ico { width: 16px; height: 16px; color: var(--muted); }
.mention {
  padding: 0 var(--sp-2xs);
  border-radius: 4px;
  background: hsl(205 80% 80% / 0.7);
  color: var(--note-ink);
  font-weight: 600;
}

.presence-say {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  color: var(--muted);
  font-size: var(--fs-s);
}
.presence-say .ico { width: 15px; height: 15px; }
.presence .face { animation: none; }
.presence.is-replying .face { animation: breathe 1.8s ease-in-out infinite; }
.presence-enter { animation: pop-in 0.45s var(--spring); }
@keyframes breathe {
  50% { box-shadow: 0 0 0 3px var(--sheet), 0 0 0 6px hsl(240 5% 50% / 0.18); }
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

.chat-pill {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-s);
  min-height: 40px;
  padding: 0 var(--sp-s) 0 var(--sp-m);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--sheet-2);
  color: var(--muted);
  font-size: var(--fs-m);
  white-space: nowrap;
}
button.chat-pill { cursor: text; }
button.chat-pill:hover { border-color: var(--line-strong); }

.reply-row { display: flex; }
.reply-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  min-height: 46px;
  padding: 0 var(--sp-l);
  border-radius: 999px;
  border: 0;
  background: var(--berry-fill);
  color: #fff;
  font: 600 var(--fs-m) / 1 var(--app-face);
}
.reply-btn kbd { border-color: hsl(0 0% 100% / 0.7); color: #fff; }

.composer {
  display: grid;
  gap: var(--sp-xs);
  padding: var(--sp-s);
  border-radius: 10px;
  background: var(--note);
}
.composer textarea,
.draft textarea {
  width: 100%;
  min-height: 4.5em;
  resize: vertical;
  padding: var(--sp-xs) var(--sp-s);
  border-radius: 8px;
  border: 1px solid var(--note-line);
  background: var(--sheet);
  color: var(--ink);
  font: var(--fs-m) / 1.5 var(--app-face);
  caret-color: var(--berry);
}
.draft textarea { border-color: var(--line); }
.composer textarea::placeholder { color: var(--faint); }
.composer textarea:focus,
.draft textarea:focus { outline: 2px solid var(--berry-fill); outline-offset: 1px; }
.composer-acts { display: flex; align-items: center; gap: var(--sp-s); }
.btn-save {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--sp-s);
  border-radius: 6px;
  border: 1.5px solid var(--ink);
  background: var(--sheet);
  color: var(--ink);
  font: 600 var(--fs-s) / 1 var(--app-face);
  cursor: pointer;
}
.btn-save:hover { background: var(--sheet-2); }
.btn-plain {
  min-height: 32px;
  padding: 0 var(--sp-2xs);
  border: 0;
  background: none;
  color: var(--muted);
  font: 500 var(--fs-s) / 1 var(--app-face);
  cursor: pointer;
}
.btn-plain:hover { color: var(--ink); text-decoration: underline; }

.is-next { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { box-shadow: 0 0 0 0 hsl(342 72% 50% / 0.45); }
  60% { box-shadow: 0 0 0 7px hsl(342 72% 50% / 0); }
}

.draft {
  display: grid;
  gap: var(--sp-xs);
  padding: var(--sp-s) var(--sp-m) var(--sp-m);
  border-radius: 12px;
  background: var(--sheet);
  box-shadow: var(--card);
}
.draft-meta { font-size: var(--fs-s); color: var(--muted); }
.draft-body { font-size: var(--fs-m); min-height: 3em; }
.draft .row-acts { margin-top: 0; justify-content: flex-start; }
.draft-enter, .note-enter { animation: rise 0.5s var(--out); }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: #3949ab;
  animation: blink 0.9s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.toast {
  position: absolute;
  left: 50%;
  top: calc(100% + var(--sp-s));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  padding: var(--sp-xs) var(--sp-xs) var(--sp-xs) var(--sp-m);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-s);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s, transform 0.4s var(--out);
}
.toast.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.toast:empty { display: none; }
.toast button {
  min-height: 28px;
  padding: 0 var(--sp-s);
  border-radius: 999px;
  border: 0;
  background: hsl(0 0% 100% / 0.16);
  color: #fff;
  font: 600 var(--fs-s) / 1 var(--app-face);
  cursor: pointer;
}
.toast button:hover { background: hsl(0 0% 100% / 0.26); }

/* ---------- Four sections: a 2×2 of real tiles ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-l);
}
.tile {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  background: var(--sheet);
  border-radius: 4px 14px 14px 14px;
  box-shadow: var(--card);
  font-size: var(--fs-s);
  min-height: 15.5rem;
}
.tile > .sec-head { border-radius: 4px 14px 0 0; }
.tile .rows { padding-bottom: var(--sp-xs); }
.tile .row-prev { white-space: normal; }
.hint { margin: 0 var(--sp-m); padding: var(--sp-s) 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-s); text-wrap: pretty; }
.hint b { color: var(--ink); }
.tile-empty { align-self: center; padding: var(--sp-l) var(--sp-m); color: var(--faint); text-align: center; }
.tiles-say { min-height: 1.5em; margin-top: var(--sp-m); font-size: var(--fs-s); color: var(--muted); }
.tiles-say b { color: var(--ink); }

.row-more {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--sheet);
  color: var(--ink);
  cursor: pointer;
}
.row-more .ico { width: 16px; height: 16px; }
.row-more:hover, .row-more[aria-expanded="true"] { background: var(--sheet-2); border-color: var(--line-strong); }
.row.has-menu { z-index: 4; }

.menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-2xs));
  z-index: 6;
  display: grid;
  min-width: 14rem;
  padding: var(--sp-2xs);
  border-radius: 10px;
  background: var(--sheet);
  box-shadow: var(--card);
  font-size: var(--fs-m);
  font-weight: 400;
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  width: 100%;
  min-height: 36px;
  padding: 0 var(--sp-s);
  border: 0;
  border-radius: 6px;
  background: none;
  text-align: left;
  font: 400 var(--fs-m) / 1.2 var(--app-face);
  color: var(--ink);
}
.menu-item .ico { width: 16px; height: 16px; color: var(--muted); }
button.menu-item { cursor: pointer; }
button.menu-item:hover, button.menu-item:focus-visible { background: var(--hover); }
.menu-item--inert { color: var(--muted); }
.menu-sep { height: 1px; margin: var(--sp-2xs) calc(-1 * var(--sp-2xs)); background: var(--line); }
.row-menu-wrap { position: relative; }
/* The assign menu: a box, then the person (reference/conversation-assign-menu.png) */
.menu-chev { margin-left: auto; transform: rotate(-90deg); }
.menu-check {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: #fff;
}
.menu-check .ico { width: 12px; height: 12px; color: inherit; stroke-width: 3; opacity: 0; }
.menu-item[aria-checked="true"] .menu-check { background: var(--berry-fill); box-shadow: none; }
.menu-item[aria-checked="true"] .menu-check .ico { opacity: 1; }
.menu-item--check { gap: var(--sp-xs); }
.menu-item--check > .ico { margin-left: var(--sp-2xs); }
.menu-item--check .face { margin-left: var(--sp-2xs); }

/* Availability: the avatar menu, and Sam's inbox */
.avail-stage {
  display: grid;
  grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr);
  gap: var(--sp-l);
  align-items: start;
}
.acct { display: grid; gap: var(--sp-xs); font-size: var(--fs-m); }
.acct-bar { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-l); padding: 0 var(--sp-2xs); color: var(--ink); }
.face--acct { width: 34px; height: 34px; }
.away-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: none;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--amber-soft);
  color: var(--amber);
  box-shadow: 0 0 0 2px var(--page);
}
.away-badge svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.is-away .away-badge { display: grid; }
.face.is-away { filter: saturate(0.25); opacity: 0.8; }
.face.is-away .away-badge { filter: none; }
.row-side .face.is-away { opacity: 1; }
.acct-menu {
  padding: var(--sp-xs);
  border-radius: 12px;
  background: var(--sheet);
  box-shadow: var(--card);
}
.acct-who { padding: var(--sp-xs) var(--sp-s); font-size: var(--fs-s); font-weight: 600; line-height: 1.35; }
.acct-who span { font-weight: 400; color: var(--muted); }
.avail-sum {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--sp-s);
  border: 0;
  border-radius: 8px;
  background: var(--sheet-2);
  text-align: left;
  font: 500 var(--fs-m) / 1.2 var(--app-face);
  color: var(--ink);
}
button.avail-sum { cursor: pointer; }
button.avail-sum:hover { background: var(--hover); }
.avail-sum > span { flex: 1; min-width: 0; }
.avail-sum .muted { font-weight: 400; }
.avail-sum .ico { color: var(--muted); transition: transform 0.2s var(--out); }
.avail-sum[aria-expanded="true"] .ico { transform: rotate(180deg); }
.av-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ok); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.is-away .av-ico, .avail-opt .av-ico { stroke: var(--amber); }
.avail-opt[data-v="available"] .av-ico { stroke: var(--ok); }
.avail-opts { display: grid; padding: var(--sp-2xs) 0 0 var(--sp-l); }
.avail-opt {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  min-height: 34px;
  padding: 0 var(--sp-s);
  border: 0;
  border-radius: 6px;
  background: none;
  font: 400 var(--fs-s) / 1.2 var(--app-face);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.avail-opt:hover { background: var(--hover); }
.avail-opt[aria-checked="true"] { background: var(--quiet); font-weight: 600; }
.acct-menu hr { height: 1px; margin: var(--sp-xs) calc(-1 * var(--sp-xs)); border: 0; background: var(--line); }
.acct-item { display: flex; align-items: center; gap: var(--sp-s); min-height: 34px; padding: 0 var(--sp-s); color: var(--ink); }
.acct-item .ico { width: 16px; height: 16px; }

.app--mini { margin-top: 42px; }
.app-head--mini { padding: var(--sp-s) var(--sp-m) var(--sp-xs); }
.app-head--mini .app-title { font-size: var(--fs-l); }
.mini-ledger { padding-bottom: var(--sp-xs); }
.mini-ledger .sec + .sec { margin-top: var(--sp-xs); }
.mini-ledger .empty { font-size: var(--fs-s); padding: var(--sp-s) var(--sp-m); }
.mini-ledger .row-prev { white-space: normal; }
/* A snippet that just changed (a new message came in) lights up, then fades. */
.row-prev.is-fresh { border-radius: 4px; animation: snip-new 3.2s ease-out forwards; }
@keyframes snip-new {
  0%, 25% { background: hsl(48 100% 80%); color: var(--ink); }
  100% { background: transparent; }
}

.flash {
  grid-column: 1 / -1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  max-width: 100%;
  min-height: 40px;
  padding: var(--sp-xs) var(--sp-m);
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-s);
  text-wrap: pretty;
  animation: rise 0.4s var(--out);
}
.flash:empty { display: none; }

/* Presence: the slim conversation */
.app--slim .thread { margin-top: var(--sp-m); }
.app--slim .msg-body { font-size: var(--fs-m); }
.reply-row--flush { margin-top: var(--sp-2xs); }
#priya-here.is-gone { display: none; }

.followers {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-top: var(--sp-2xs);
  font-size: var(--fs-s);
  color: var(--muted);
}
.followers .ico { width: 15px; height: 15px; }

/* ---------- Everything else: search, the list, one panel ---------- */

.finder-field {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--sp-m);
  border-radius: 999px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--hairline);
  color: var(--faint);
  cursor: text;
}
.finder-field:focus-within { outline: 2px solid var(--berry-fill); outline-offset: 1px; }
.finder-field input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  background: none;
  color: var(--ink);
  font: var(--fs-m) / 1 var(--app-face);
  outline: none;
}
.finder-field input::placeholder { color: var(--faint); }
.finder-count { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; padding: 0 var(--sp-s); }
.finder-empty { padding: var(--sp-xs) var(--sp-s); font-size: var(--fs-s); color: var(--muted); text-wrap: pretty; }
.finder-empty a { color: var(--berry-strong); font-weight: 600; }
mark.hit { background: var(--berry-soft); color: var(--berry-strong); border-radius: 3px; padding: 0 1px; }

/* ---------- Price: one card, a settings-style list ---------- */

/* The heading on the left, the plan on the right. Narrower, they stack. */
.price-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "head plan";
  gap: var(--sp-2xl) var(--sp-4xl);
  align-items: start;
}
.price-block .block-head { grid-area: head; margin-bottom: 0; }
.price-plan { grid-area: plan; }
.build-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "head plan";
  gap: var(--sp-2xl) var(--sp-4xl);
  align-items: start;
}
.build-block .block-head { grid-area: head; margin-bottom: 0; }
.build-plan { grid-area: plan; }

.settings {
  background: var(--sheet);
  border-radius: 14px;
  box-shadow: var(--card);
  padding: var(--sp-l);
  display: grid;
  gap: var(--sp-s);
}
.settings-title { font-size: var(--fs-xl); font-weight: 600; }
.settings-lede { color: var(--muted); }

.list-card { border-radius: 10px; box-shadow: 0 0 0 1px var(--hairline); margin: var(--sp-xs) 0 var(--sp-s); }
.list-card li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: var(--sp-s);
  align-items: center;
  padding: var(--sp-s) var(--sp-m);
  border-bottom: 1px solid var(--line);
}
.list-card li:last-child { border-bottom: 0; }
.lead { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--sheet-2); color: var(--ink); }
.lead--berry { background: var(--berry-soft); }
.lead img { width: 20px; height: auto; }
.li-title { font-weight: 600; }
.li-meta { font-size: var(--fs-s); color: var(--muted); }
.li-side { text-align: right; }
.price {
  font-family: var(--display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.0125em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--sp-xs);
  border-radius: 999px;
  background: var(--quiet);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.status--mint { background: var(--mint-fill); color: var(--mint-ink); }
.fine { font-size: var(--fs-s); color: var(--muted); text-align: center; text-wrap: balance; }

/* The calculator, at the foot of pricing/: the old site's "Shopping
   around?" sums. With scripts off it is the table at its default size;
   calc.js gives it the slider. */
.calc-size { display: grid; gap: var(--sp-2xs); margin-top: var(--sp-2xs); }
.calc-label { font-size: var(--fs-l); font-weight: 600; }
.calc-n {
  display: inline-block;
  min-width: 2ch;
  font-family: var(--display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--berry-strong);
  font-variant-numeric: tabular-nums;
}
.calc-range { width: 100%; height: 44px; margin: 0; accent-color: var(--berry-fill); cursor: pointer; }
.calc-list li { grid-template-columns: minmax(0, 1fr) auto; }
.calc-jelly { background: var(--berry-soft); border-radius: 10px 10px 0 0; }
.calc-price { color: var(--berry-strong); }
.calc-per { font-size: var(--fs-s); color: var(--muted); }

/* ---------- Jelly for Mac (mac/): the screenshot and its download ---------- */

.download {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-2xl) var(--gutter) var(--sp-4xl);
  display: grid;
  justify-items: center;
  gap: var(--sp-l);
  text-align: center;
}
/* Small enough that the download under it shows on a laptop's first screen. */
.download-shot { width: 100%; max-width: 880px; height: auto; }
.download-note { color: var(--muted); }

/* ---------- Closing ---------- */

.closing {
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--sp-5xl) var(--gutter);
  margin-top: var(--sp-4xl);
  display: grid;
  justify-items: center;
  gap: var(--sp-l);
  text-align: center;
}
.closing .lede { max-width: 32em; }
.closing-mascot { width: 120px; height: auto; transform: rotate(-6deg); }

/* ---------- Footer ---------- */

/* Written by cmd/marketinggen on every page, between its markers:
   the brand and a column a subject, then the legal line under them. */
.site-foot {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) repeat(4, auto);
  gap: var(--sp-2xl) var(--sp-4xl);
  padding: var(--sp-3xl) max(var(--gutter), (100% - var(--max)) / 2) var(--sp-4xl);
  border-top: 1px solid var(--hairline);
  background: var(--sheet);
  font-size: var(--fs-s);
  color: var(--muted);
}
.foot-brand { display: grid; gap: var(--sp-s); align-content: start; justify-items: start; }
.foot-col { display: grid; gap: var(--sp-xs); align-content: start; }
.foot-col h2 { font-size: var(--fs-s); font-weight: 600; color: var(--ink); }
.foot-col ul { display: grid; gap: var(--sp-xs); }
.site-foot a { color: var(--ink); text-decoration-color: var(--line-strong); }
.site-foot a:hover { color: var(--berry-strong); text-decoration-color: currentColor; }
/* Made by: under the brand where the columns sit beside it, and in the
   cell after Help where they wrap. */
.foot-legal { display: grid; gap: var(--sp-xs); align-content: start; justify-items: start; }
@media (min-width: 861px) {
  .site-foot { grid-template-rows: auto 1fr; row-gap: 0; }
  .foot-col { grid-row: 1 / span 2; }
  .foot-legal { grid-column: 1; grid-row: 2; padding-top: var(--sp-l); }
}
.foot-made { display: inline-flex; align-items: baseline; gap: var(--sp-2xs); }
/* The Exciting logo is a font of one glyph (the same one the Rails app
   draws): the card with its letters cut out, in the text colour. The
   glyph's letters stand on the font's own baseline, so the logo sits on
   the baseline of the words beside it. Its card is 6em wide and reaches
   1.71em above that baseline and 0.95em below (measured: the advance is
   1em, so the card is shifted .4em right of where it starts), and the
   margins give the line the room it takes. */
@font-face {
  font-family: "Exciting";
  font-style: normal;
  font-display: block;
  src: url("assets/exciting.woff2") format("woff2");
}
.exciting-logo {
  display: inline-block;
  width: 5.98em;
  margin: 1.71em 0 0.95em;
  font: normal 0.7rem/0 "Exciting";
  color: var(--ink);
  text-decoration: none;
}
.exciting-logo::before { content: "E"; margin-left: 0.4em; }
.brand--foot .wordmark { width: 60px; }

/* The debug corner (?debug=true): which sections block */
.review {
  position: fixed;
  left: var(--sp-s);
  bottom: var(--sp-s);
  z-index: 20;
  display: grid;
  justify-items: start;
  gap: var(--sp-2xs);
  max-width: calc(100vw - 2 * var(--sp-s));
  font-size: var(--fs-xs);
}
.review[hidden] { display: none; }
.review-pick {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3xs);
  padding: var(--sp-3xs);
  border-radius: 999px;
  background: hsl(240 5% 98.5% / 0.95);
  box-shadow: 0 0 0 1px var(--hairline), 0 4px 12px -4px hsl(240 5% 10% / 0.2);
}
.review-label { padding: 0 var(--sp-2xs) 0 var(--sp-xs); font-weight: 600; color: var(--muted); }
.review-pick button {
  min-height: 28px;
  padding: 0 var(--sp-s);
  border: 0;
  border-radius: 999px;
  background: none;
  font: 600 var(--fs-xs) / 1 var(--app-face);
  color: var(--ink);
  cursor: pointer;
}
.review-pick button:hover { background: var(--hover); }
.review-pick button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ---------- People who only appear in some blocks ---------- */

.face--sarah { --bg: hsl(275 42% 46%); background: var(--bg); color: #fff; }
.face--mike { --bg: hsl(212 72% 44%); background: var(--bg); color: #fff; }
.face--c3 { --bg: hsl(150 50% 32%); background: var(--bg); color: #fff; }
.row-side .bell { width: 15px; height: 15px; margin-top: 6px; color: var(--muted); }
.row-more.is-open { background: var(--berry-soft); color: var(--berry-strong); border-color: transparent; }
span.row-more { cursor: default; }
span.igt { cursor: default; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn--ghost:hover { background: var(--quiet); color: var(--ink); }
.btn kbd { min-width: 18px; height: 18px; }
.btn--primary kbd { color: #fff; border-color: hsl(0 0% 100% / 0.7); }
.btn.is-open { background: var(--berry-soft); color: var(--berry-strong); border-color: transparent; }
.btn[disabled] { opacity: 0.5; cursor: default; }
.status--warn { background: var(--amber-soft); color: var(--amber); }

/* ---------- Sections, B: two people's inboxes side by side (17) ---------- */

.views-bar {
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-s) var(--sp-m);
  min-height: 36px;
  margin: calc(-1 * var(--sp-l)) 0 var(--sp-l);
}
.views-say { flex: 1 1 20rem; font-size: var(--fs-s); color: var(--muted); text-wrap: pretty; }
.views-say b { color: var(--ink); }
.views-say:empty { display: none; }
.js .views-bar:has(.views-say:empty):has(#views-reset[hidden]) { display: none; }

.views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2xl); align-items: start; }
.view { display: grid; gap: var(--sp-s); min-width: 0; }
.view-who { display: flex; align-items: center; gap: var(--sp-s); }
.view-who > span:last-child { display: grid; line-height: 1.3; }
.view-who b { font-size: var(--fs-l); font-weight: 700; letter-spacing: -0.0125em; }
.view-who > span:last-child > span { font-size: var(--fs-s); color: var(--muted); }
.app--view { padding-bottom: var(--sp-xs); overflow: clip; }
.app--view .sec + .sec { margin-top: var(--sp-xs); }
.app--view .row { transition: background-color 0.2s, box-shadow 0.2s; }
.views:has(.row[data-c="gnome"]:hover) .row[data-c="gnome"],
.views:has(.row[data-c="trowels"]:hover) .row[data-c="trowels"],
.views:has(.row[data-c="tortoise"]:hover) .row[data-c="tortoise"],
.views:has(.row[data-c="boats"]:hover) .row[data-c="boats"] {
  background: hsl(342 95% 97%);
  box-shadow: -16px 0 0 hsl(342 95% 97%), 16px 0 0 hsl(342 95% 97%);
}
.views:has(.row[data-c="gnome"]:hover) .row[data-c="gnome"] .row-subj,
.views:has(.row[data-c="trowels"]:hover) .row[data-c="trowels"] .row-subj,
.views:has(.row[data-c="tortoise"]:hover) .row[data-c="tortoise"] .row-subj,
.views:has(.row[data-c="boats"]:hover) .row[data-c="boats"] .row-subj { color: var(--berry-strong); }

/* ---------- Sections, C: whose inbox? (18) ---------- */

.whose { display: grid; gap: var(--sp-l); }
.whose-pick { flex-wrap: wrap; align-items: center; gap: var(--sp-xs); }
.whose-label { font-weight: 700; font-size: var(--fs-l); margin-right: var(--sp-xs); letter-spacing: -0.0125em; }
.who-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  min-height: 44px;
  padding: 0 var(--sp-m) 0 var(--sp-xs);
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--sheet);
  color: var(--ink);
  font: 600 var(--fs-m) / 1 var(--app-face);
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.2s var(--spring);
}
.who-btn .face { width: 30px; height: 30px; font-size: var(--fs-2xs); }
.who-btn:hover { background: var(--sheet-2); }
.who-btn:active { transform: scale(0.96); }
.who-btn[aria-pressed="true"] { border-color: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.whose-say {
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2xs) var(--sp-s);
  min-height: 3em;
  color: var(--muted);
  text-wrap: pretty;
}
.whose-say b { color: var(--ink); }
.whose-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-3xl);
  align-items: start;
}
.app--whose .ledger { overflow-anchor: none; }
.app--whose .row-prev { font-size: var(--fs-s); }
.whose-key { position: sticky; top: var(--sp-l); }
.key-title { font-size: var(--fs-xl); margin-bottom: var(--sp-s); }
.key { display: grid; }
.key > div { padding: var(--sp-m) 0; border-top: 1px solid var(--line); }
.key > div:last-child { border-bottom: 1px solid var(--line); }
.key dt { display: flex; align-items: center; gap: var(--sp-xs); font-weight: 700; }
.key-n { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.key dd { margin: var(--sp-2xs) 0 0; color: var(--muted); text-wrap: pretty; }
.key dd b { color: var(--ink); }
.key > div.is-news dd { color: var(--ink); }
.swatch { width: 18px; height: 14px; background: var(--wash-blue); box-shadow: inset 3px 0 0 var(--edge-blue); }
.swatch--berry { background: var(--wash-berry); box-shadow: inset 3px 0 0 var(--edge-berry); }
.swatch--lemon { background: var(--wash-lemon); box-shadow: inset 3px 0 0 var(--edge-lemon); }
.swatch--stone { background: var(--wash-stone); box-shadow: inset 3px 0 0 var(--edge-stone); }
.news {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 var(--sp-xs);
  margin-right: var(--sp-2xs);
  border-radius: 999px;
  background: var(--berry-soft);
  color: var(--berry-strong);
  font-size: var(--fs-xs);
  font-weight: 600;
  vertical-align: 1px;
}

/* ---------- Everything else: the list and its panels (18) ---------- */

.explore {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: var(--sp-3xl);
  align-items: start;
}
.explore-nav { position: sticky; top: var(--sp-l); display: grid; gap: var(--sp-xs); }
.explore-find { flex-direction: column; gap: var(--sp-2xs); }
.explore-list { display: grid; gap: var(--sp-3xs); }
.explore-list a,
.tab {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  width: 100%;
  min-height: 44px;
  padding: var(--sp-xs) var(--sp-s);
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font: 500 var(--fs-m) / 1.25 var(--app-face);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.explore-list a .ico, .tab .ico { color: var(--faint); }
.explore-list a:hover, .tab:hover { background: var(--hover); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--sheet); color: var(--ink); font-weight: 600; box-shadow: var(--card); }
.tab[aria-selected="true"] .ico { color: var(--berry-strong); }

.explore-panels { display: grid; gap: var(--sp-l); min-width: 0; }
.feature {
  display: grid;
  gap: var(--sp-l);
  min-width: 0;
  padding: var(--sp-xl);
  border-radius: 14px;
  background: var(--sheet);
  box-shadow: var(--card);
  scroll-margin-top: var(--sp-l);
}
.feature-copy { display: grid; gap: var(--sp-s); max-width: 40rem; }
.feature-copy h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.0125em; font-size: var(--fs-2xl); line-height: 1.15; text-wrap: balance; }
.feature-copy p { color: var(--muted); font-size: var(--fs-l); text-wrap: pretty; }
.feature-copy p b { color: var(--ink); }
.feature-copy kbd { min-width: 22px; height: 22px; font-size: var(--fs-xs); color: var(--ink); }
.feature.is-fresh .frag { animation: rise 0.4s var(--out); }
.feature-copy .nudge { font-size: var(--fs-s); }

/* A fragment of the app, on the page's grey, so its white cards read */
.frag {
  position: relative;
  min-width: 0;
  padding: var(--sp-l);
  border-radius: 12px;
  background: var(--page);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-s);
}
.frag-cap { font-size: var(--fs-s); color: var(--muted); }
.frag-cap b { color: var(--ink); }
.frag-cap .linkish { color: var(--berry-strong); }
.frag > .frag-cap:first-child { margin-bottom: var(--sp-m); }
.frag .spine-row > .face { box-shadow: 0 0 0 3px var(--page); }
.frag .app .spine-row > .face { box-shadow: 0 0 0 3px var(--sheet); }
.spine--frag::before { top: var(--sp-s); bottom: 0; }
.frag .followers { margin-top: var(--sp-s); }
.frag.avail-stage { padding: var(--sp-l); }

.mini-list { border-radius: 12px; background: var(--sheet); box-shadow: var(--card); overflow: clip; }
.mini-list .row { padding: var(--sp-s) var(--sp-m) var(--sp-s) var(--sp-xs); }
.mini-list .dot { margin-top: 28px; margin-left: var(--sp-2xs); }
.mini-list .rows { padding: 0; }
.mini-list .sec-head { font-size: var(--fs-s); padding: var(--sp-2xs) var(--sp-s); }
.ledger.mini-list { padding-bottom: 0; }
.frag--stack { display: grid; gap: var(--sp-m); }

.draft-mark {
  display: inline-block;
  padding: 0 var(--sp-2xs);
  margin-right: var(--sp-2xs);
  border-radius: 3px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.draft-to { font-size: var(--fs-s); color: var(--muted); }
.draft-to span { font-weight: 600; color: var(--ink); margin-right: var(--sp-xs); }
.draft--card .row-acts { margin-top: var(--sp-xs); }

.frag--card { display: grid; gap: var(--sp-m); background: var(--sheet); font-size: var(--fs-m); }
.card-ico { width: 28px; height: 28px; fill: none; stroke: var(--berry-strong); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.facts { display: grid; }
.facts li { position: relative; padding: var(--sp-xs) 0 var(--sp-xs) var(--sp-l); border-top: 1px solid var(--line); text-wrap: pretty; }
.facts li:first-child { border-top: 0; }
.facts li::before { content: ""; position: absolute; left: var(--sp-2xs); top: 1.05em; width: 6px; height: 6px; border-radius: 50%; background: var(--berry); }
.facts--cols { columns: 2 16rem; column-gap: var(--sp-xl); display: block; }
.facts--cols li { break-inside: avoid; }
.facts li.is-hit { background: var(--berry-soft); box-shadow: -6px 0 0 var(--berry-soft), 6px 0 0 var(--berry-soft); border-radius: 4px; }
.facts--cols li:first-child { border-top: 1px solid var(--line); }
.rule-line { font-size: var(--fs-l); line-height: 1.7; text-wrap: pretty; }
.rule-line .chip-label { vertical-align: 1px; }
.frag--chips { display: grid; gap: var(--sp-m); }
.chips-row { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.frag--chips .chip-label { font-size: var(--fs-s); min-height: 28px; padding: 0 var(--sp-s); }

.keylist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s);
  padding: var(--sp-xs) 0;
  border-top: 1px solid var(--line);
}
.keylist li:first-child { border-top: 0; }
.keylist kbd, .keys kbd { min-width: 24px; height: 24px; font-size: var(--fs-xs); font-weight: 600; border-bottom-width: 2px; }
.keys { display: inline-flex; gap: var(--sp-2xs); flex: none; }

/* Labels, in Jelly's own fruit colours */
[data-colour="apricot"] { --c: hsl(20 80% 72%); --i: hsl(20 88% 17%); }
[data-colour="grape"] { --c: hsl(255 80% 76%); --i: hsl(255 88% 17%); }
[data-colour="blueberry"] { --c: hsl(205 80% 72%); --i: hsl(205 88% 15%); }
[data-colour="cherry"] { --c: hsl(2 80% 74%); --i: hsl(2 88% 17%); }
[data-colour="lime"] { --c: hsl(105 75% 66%); --i: hsl(105 88% 14%); }
[data-colour="lemon"] { --c: hsl(45 85% 66%); --i: hsl(45 88% 14%); }
[data-colour="peach"] { --c: hsl(30 85% 74%); --i: hsl(30 88% 17%); }
[data-colour="mint"] { --c: hsl(135 75% 68%); --i: hsl(135 88% 14%); }
[data-colour="fig"] { --c: hsl(320 55% 72%); --i: hsl(320 70% 17%); }
[data-colour="raspberry"] { --c: hsl(342 80% 72%); --i: hsl(342 88% 17%); }
[data-colour="juniper"] { --c: hsl(180 80% 68%); --i: hsl(180 88% 14%); }
.chip-label {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--sp-xs);
  border-radius: 999px;
  background: var(--c);
  color: var(--i);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.2;
}

/* History: folded messages, notes and events on the thread's spine */
.spine--story::before { top: var(--sp-m); bottom: var(--sp-m); }
.msg.msg--folded {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: var(--sp-s);
  align-items: center;
  padding: var(--sp-xs) var(--sp-s) var(--sp-xs) var(--sp-xs);
}
.mf-line { min-width: 0; font-size: var(--fs-s); line-height: 1.35; }
.mf-line b { font-weight: 600; font-size: var(--fs-m); }
.mf-line > span:not(.mf-snip) { color: var(--faint); }
.mf-snip { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg--folded .msg-tools { align-self: start; padding-top: var(--sp-3xs); }
.event {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs);
  padding-left: 48px;
  font-size: var(--fs-s);
}
.event b { font-weight: 500; }
.event .ico { width: 16px; height: 16px; }
.event time { font-size: var(--fs-xs); color: var(--faint); }

/* Saved replies: the reply editor, its toolbar and its list */
.composer-card {
  display: grid;
  gap: var(--sp-xs);
  padding: var(--sp-s) var(--sp-m) var(--sp-m);
  border-radius: 12px;
  background: var(--sheet);
  box-shadow: var(--card);
  font-size: var(--fs-s);
}
.composer-card .row-acts { margin-top: var(--sp-2xs); flex-wrap: wrap; }
/* The real reply editor's frame (jam.css .jam-editor-wrap): a 1px line
   round the whole of it, toolbar and text together. */
.ed { position: relative; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); }
.ed:focus-within { border-color: var(--berry); box-shadow: 0 0 0 3px var(--berry-soft); }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); padding: var(--sp-2xs); border-bottom: 1px solid var(--line); }
.tb-group { display: flex; gap: var(--sp-3xs); padding-right: var(--sp-2xs); border-right: 1px solid var(--line); }
.tb-group:last-child { border-right: 0; }
.tb-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font: 700 var(--fs-m) / 1 var(--app-face);
}
.tb-i { font-style: italic; font-weight: 500; font-family: Georgia, serif; }
button.tb-btn { cursor: pointer; color: var(--ink); }
button.tb-btn:hover, .tb-btn[aria-expanded="true"], span.tb-btn.is-on { background: var(--berry-soft); color: var(--berry-strong); }
button.tb-btn:disabled { background: none; color: var(--faint); cursor: default; }
.saved-dialog {
  position: absolute;
  z-index: 3;
  left: var(--sp-2xs);
  top: 44px;
  display: grid;
  width: min(22rem, calc(100% - 8px));
  padding: var(--sp-2xs);
  border-radius: 10px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--hairline), 0 12px 32px -8px hsl(240 5% 10% / 0.25);
}
.saved-opt {
  display: grid;
  gap: var(--sp-3xs);
  min-width: 0;
  padding: var(--sp-xs) var(--sp-s);
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: left;
}
button.saved-opt { cursor: pointer; }
button.saved-opt:hover { background: var(--hover); }
.saved-opt strong { font-weight: 600; }
.saved-snip { color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-body { padding: var(--sp-s); min-height: 9.5rem; font-size: var(--fs-m); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.ed .ed-body { box-shadow: none; }
.ed-body p + p { margin-top: var(--sp-s); }
.ed-body--read { min-height: 0; box-shadow: none; padding: var(--sp-2xs) 0; }
.caret { display: inline-block; width: 2px; height: 1.1em; vertical-align: text-bottom; background: var(--berry); }
.ed-text {
  display: block;
  width: 100%;
  min-height: 9.5rem;
  padding: var(--sp-s);
  border: 0;
  border-radius: 0 0 8px 8px;
  background: transparent;
  color: var(--ink);
  font: var(--fs-m) / 1.5 var(--app-face);
  resize: vertical;
}
.ed-text:focus { outline: none; }
.shelf { display: flex; flex-wrap: wrap; gap: var(--sp-2xs) var(--sp-m); }
.shelf a { color: var(--berry-strong); text-decoration: none; font-weight: 500; }
.frag--saved, .frag--sendlater { display: grid; gap: var(--sp-s); }
.frag--sendlater .ed-body { min-height: 5rem; }
.frag--sendlater .ed-body--read { min-height: 0; }

/* Snooze: a list, its row's menu, and the Snoozed view */
.frag--snooze { display: grid; gap: var(--sp-m); }
.snooze-stack { position: relative; display: grid; gap: var(--sp-m); }
.snooze-stack.has-menu, .snooze-stack:has(> .fmenu--row) { padding-bottom: 7rem; }
.fmenu {
  border-radius: 12px;
  background: var(--sheet);
  font-size: var(--fs-s);
  box-shadow: 0 0 0 1px var(--hairline), 0 12px 32px -8px hsl(240 5% 10% / 0.25);
}
.fmenu--row { position: absolute; z-index: 3; right: var(--sp-s); top: 92px; width: min(15rem, calc(100% - 24px)); }
.fmenu-items { padding: var(--sp-2xs) 0; border-top: 1px solid var(--line); }
.fmenu-items:first-child { border-top: 0; }
.fmenu-items li { display: flex; align-items: center; gap: var(--sp-s); min-height: 32px; padding: var(--sp-2xs) var(--sp-m); }
.fmenu-items .ico { width: 16px; height: 16px; color: var(--ink); }
.fmenu kbd { margin-left: auto; }
.fmenu-chev { margin-left: auto; color: var(--muted); }
.fmenu-chev.is-open { transform: rotate(180deg); }
.fmenu-chev.is-side { transform: rotate(-90deg); }
.fmenu-items li:has(> .fmenu-pre) { padding: 0 var(--sp-2xs) 0 var(--sp-xl); }
li.fmenu-pre { padding-left: calc(var(--sp-xl) + var(--sp-s)) !important; }
.fmenu-pre {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 0 var(--sp-s);
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: left;
}
button.fmenu-pre { cursor: pointer; }
button.fmenu-pre:hover { background: var(--hover); }
.snoozed-view { display: grid; gap: var(--sp-xs); }
.view-title { display: flex; align-items: center; gap: var(--sp-xs); font-weight: 700; font-size: var(--fs-m); }
.snoozed-view .row-acts { margin-top: var(--sp-2xs); }
.snz-acts { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-top: var(--sp-xs); }
.snz-acts .ico, .event-say .ico { width: 16px; height: 16px; }
.event-say { display: inline-flex; align-items: center; gap: var(--sp-xs); color: var(--ink); }
.event-say b { font-weight: 500; }

/* Send later: the composer's foot, its popover, and the scheduled draft */
.compose-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs); margin-top: var(--sp-2xs); }
.later-wrap { display: inline-flex; }
.later-pop {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs) var(--sp-s);
  padding: var(--sp-s);
  border-radius: 10px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--hairline), 0 12px 32px -8px hsl(240 5% 10% / 0.2);
}
.later-label { font-weight: 600; }
.later-input {
  min-height: 32px;
  min-width: 0;
  max-width: 100%;
  padding: var(--sp-2xs) var(--sp-xs);
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--sheet);
  color: var(--ink);
  font: var(--fs-s) / 1.4 var(--app-face);
}
span.later-input { display: inline-flex; align-items: center; }
.scheduled {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-xs) var(--sp-s);
  padding: var(--sp-xs) var(--sp-s);
  border-radius: 8px;
  background: var(--amber-soft);
  color: hsl(45 88% 22%);
  font-weight: 600;
}
.scheduled .btn { background: var(--sheet); }

/* ---------- In their words: quote posters (18) ---------- */

.posters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-l); }
.poster {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-xl);
  min-height: 18rem;
  padding: var(--sp-xl);
  border-radius: 14px;
  background: var(--c);
  color: var(--i);
}
.poster--wide { grid-column: span 4; }
.poster blockquote p {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 0.9rem + 0.9vw, 1.625rem);
  line-height: 1.22;
  letter-spacing: -0.0125em;
  text-wrap: pretty;
}
.poster--wide blockquote p { font-size: clamp(1.5rem, 1rem + 1.5vw, 2.375rem); line-height: 1.14; }
.poster mark {
  background: hsl(0 0% 100% / 0.55);
  color: inherit;
  border-radius: 4px;
  padding: 0 0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Where lh is understood, a highlight is a band exactly one line tall,
   so the lines of one meet edge to edge in any face at any size. The
   plain background above covers the font's ascent and descent instead,
   which is taller or shorter than the line by however the face is
   drawn: a gap between lines in one face, an overlap in another. Here
   the box is padded past the line and the band drawn 1lh tall at its
   centre, where the line's centre is, with a dot at each corner. The
   colour is opaque, so where two lines meet on a fraction of a pixel
   nothing shows the seam. */
@supports (height: 1lh) {
  .poster mark {
    --hl: color-mix(in srgb, #fff 55%, var(--c));
    --r: 4px;
    --dot: radial-gradient(closest-side, var(--hl) calc(100% - 0.5px), transparent);
    --top: calc(50% - 0.5lh + var(--r));
    --bottom: calc(50% + 0.5lh - var(--r));
    background:
      linear-gradient(var(--hl) 0 0) center / calc(100% - 2 * var(--r)) 1lh,
      linear-gradient(var(--hl) 0 0) center / 100% calc(1lh - 2 * var(--r)),
      var(--dot) left 0 top var(--top) / calc(2 * var(--r)) calc(2 * var(--r)),
      var(--dot) right 0 top var(--top) / calc(2 * var(--r)) calc(2 * var(--r)),
      var(--dot) left 0 top var(--bottom) / calc(2 * var(--r)) calc(2 * var(--r)),
      var(--dot) right 0 top var(--bottom) / calc(2 * var(--r)) calc(2 * var(--r));
    background-repeat: no-repeat;
    border-radius: 0;
    padding: 0.25lh 0.08em;
  }
}
.poster figcaption, .story-quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-s);
  font-size: var(--fs-s);
}
.poster figcaption b, .story-quote figcaption b { display: block; font-weight: 700; }
.poster-who { flex: 1 1 9rem; min-width: 0; }
.poster-face {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px hsl(0 0% 100% / 0.6);
}
.poster-face--initials {
  display: grid;
  place-items: center;
  background: var(--i);
  color: var(--c);
  font-size: var(--fs-m);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.poster-story {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--sp-m);
  border-radius: 999px;
  border: 1px solid currentColor;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.poster-story:hover { background: hsl(0 0% 100% / 0.35); }

/* ---------- The ported blocks, narrower ---------- */

@media (max-width: 1080px) {
  .whose-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xl); }
  .whose-key { position: static; }
  .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poster, .poster--wide { grid-column: span 1; }
  /* The first runs the whole width, and so does the last when it would
     otherwise sit alone in its row. */
  .poster--wide:first-child, .poster:last-child:nth-child(even) { grid-column: span 2; }
  /* A wide poster in one column of two sets its words at the narrow size. */
  .poster--wide:not(:first-child) blockquote p { font-size: clamp(1.25rem, 0.9rem + 0.9vw, 1.625rem); line-height: 1.22; }
  .poster:last-child:nth-child(even) { min-height: 0; }
}

@media (max-width: 860px) {
  .views { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2xl); }
  .view-who { position: sticky; top: 0; z-index: 2; padding: var(--sp-xs) 0; background: var(--page); }
  .explore { grid-template-columns: minmax(0, 1fr); gap: var(--sp-m); }
  .explore-nav { position: static; }
  .js .explore-list {
    display: flex;
    gap: var(--sp-2xs);
    overflow-x: auto;
    margin: 0 calc(-1 * var(--gutter));
    padding: var(--sp-2xs) var(--gutter) var(--sp-s);
    scrollbar-width: none;
  }
  .js .explore-list li { flex: none; }
  .js .tab { white-space: nowrap; width: auto; }
  .feature { padding: var(--sp-l); }
}

@media (max-width: 560px) {
  .feature { padding: var(--sp-m); }
  .feature-copy h3 { font-size: var(--fs-xl); }
  .feature-copy p { font-size: var(--fs-m); }
  .frag, .frag.avail-stage { padding: var(--sp-m) var(--sp-s); }
  .posters { grid-template-columns: minmax(0, 1fr); gap: var(--sp-m); }
  .poster, .poster--wide, .poster--wide:first-child, .poster:last-child:nth-child(even) { grid-column: auto; min-height: 0; padding: var(--sp-l); }
  .whose-label { width: 100%; }
  .app--whose .row-prev { display: none; }
  .row-side .chip-label { display: none; }
  .msg--folded .msg-tools time { display: none; }
  .frag .convo--slim { padding: var(--sp-m) var(--sp-s); }
  .frag .c-bar { flex-wrap: wrap; }
}

/* ---------- Narrower ---------- */

@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-copy { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-xl); padding-top: 0; }
  .hero-copy > :not(.ctas, .nudge) { grid-column: 1 / -1; max-width: 40rem; }
  .hero-copy .nudge { align-self: center; max-width: 24ch; margin-top: var(--sp-xs); }
  .price-block, .build-block { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "plan"; gap: var(--sp-2xl); }
}

@media (max-width: 860px) {
  :root { --gutter: var(--sp-m); }
  .site-nav .wide { display: none; }
  .convo-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-l); }
  .steps-col { position: static; }
  .tiles { grid-template-columns: minmax(0, 1fr); gap: var(--sp-m); }
  .tile { min-height: 0; }
  .block { padding-top: var(--sp-4xl); }
}

@media (max-width: 640px) {
  .stage--convo, .again-wrap, #convo-nudge, .wide-only { display: none; }
  .steps { gap: var(--sp-xl); }
  .slice { display: block; margin-top: var(--sp-s); }
  .slice .convo--slim { padding: var(--sp-m) var(--sp-s) var(--sp-m) var(--sp-xs); }
  .slice .thread { margin-top: 0; }
  .slice .draft { margin: 0; }
  .slice .spine-row.chat { min-height: 44px; }
  /* Every step is read in turn here, so none is the current one. */
  .js .step .step-title { color: var(--ink); }
  .js .step .step-desc { color: var(--muted); }
  .js .step.is-current { background: none; box-shadow: none; }
  .js .step.is-current .step-mark,
  .js .step.is-done .step-mark { background: none; border-color: var(--line-strong); color: transparent; }
  .js .step.is-done .step-mark::before { content: counter(step); }
  .js .step.is-current .step-mark::before { color: var(--muted); }
  .js .step.is-done .step-mark .ico { display: none; }
  .hero-copy { grid-template-columns: minmax(0, 1fr); }
  .hero-copy .nudge { max-width: none; margin-top: 0; }
  .avail-stage { grid-template-columns: minmax(0, 1fr); gap: var(--sp-s); }
  .app--mini { margin-top: 0; }
  .flash { justify-self: stretch; }
}

@media (max-width: 560px) {
  .hero { padding-top: var(--sp-l); }
  .lede { font-size: var(--fs-m); }
  .app-search { display: none; }
  .app-bar { gap: var(--sp-xs); }
  .rows { padding: 0 var(--sp-s); }
  .row-prev { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .convo, .convo--slim { padding: var(--sp-m) var(--sp-m) var(--sp-l); }
  .convo { min-height: 0; }
  .act-word { display: none; }
  .act--claim .act-word { display: inline-flex; }
  .act--claim kbd { display: none; }
  .msg-tools time { display: none; }
  .msg-body { padding-left: var(--sp-s); }
  .peek { right: var(--sp-l); }
  .peek--convo { right: var(--sp-l); }
  .list-card li { grid-template-columns: 36px minmax(0, 1fr); }
  .li-side { grid-column: 2; text-align: left; }
  .calc-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .calc-list .li-side { grid-column: auto; text-align: right; }
  .settings { padding: var(--sp-m); }
  .ctas .pill { flex: 1 1 auto; }
    .chat-pill { font-size: var(--fs-s); }
}

/* ---------- Customer stories (customer-stories/*) ---------- */

.story {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--sp-4xl) var(--gutter) 0;
  display: grid;
  gap: var(--sp-2xl);
}
.story-head { display: grid; gap: var(--sp-s); text-align: center; }
.story-pre { font-size: var(--fs-l); font-weight: 600; color: var(--berry-strong); }
/* A customer's own logo, above the story's title. */
.story-logo { justify-self: center; width: min(100%, 20rem); height: auto; }
.story-quote {
  display: grid;
  gap: var(--sp-l);
  padding: var(--sp-xl);
  border-radius: 14px;
  background: var(--c);
  color: var(--i);
}
.story-quote blockquote p {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.0125em;
  text-wrap: pretty;
}
.story-quote em { font-style: normal; }
.story-body { display: grid; gap: var(--sp-l); font-size: var(--fs-l); text-wrap: pretty; }
.story-body a { color: var(--berry-strong); font-weight: 600; }
.story-figure { display: grid; gap: var(--sp-s); margin: var(--sp-s) 0; }
.story-figure img { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--card); }
.story-figure figcaption { font-size: var(--fs-s); color: var(--muted); text-align: center; text-wrap: balance; }

@media (max-width: 560px) {
  .story { padding-top: var(--sp-xl); gap: var(--sp-xl); }
  .story-head { text-align: left; }
  .story-logo { justify-self: start; }
  .story-quote { padding: var(--sp-l); }
  .story-body { font-size: var(--fs-m); gap: var(--sp-m); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .is-next { box-shadow: 0 0 0 3px var(--berry-soft); }
  .row-prev.is-fresh { animation: none; background: hsl(48 100% 85%); color: var(--ink); }
}

/* ---------- Plans: pricing/ and compare/ ---------- */

/* The two plans side by side, Royal Jelly ringed in strawberry; under
   them, what every plan comes with beside the calculator, on the same
   grid. Narrower, both pairs stack. */
.plans-page { display: grid; gap: var(--sp-2xl); }
.plans-page .block-head { margin-bottom: 0; }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2xl); align-items: start; }
.plan-card--royal { box-shadow: 0 0 0 2px var(--berry), var(--lift); }
.plan-card .list-card, .plan-terms .list-card { margin-bottom: 0; }
.plan-card .list-card li { grid-template-columns: minmax(0, 1fr) auto; }
/* Paying yearly is the deal to notice: its row wears mint, and its
   saving a pill beside the word. */
.plan-card .plan-yearly { background: var(--mint-soft); border-radius: 0 0 10px 10px; }
.plan-yearly .li-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs); }

/* The comparison is a table: a feature to a row, a plan to a column.
   A tick or a dash says it to the eye, and the hidden word beside it
   says it to a screen reader. */
.compare-card { padding: var(--sp-xs) var(--sp-l) var(--sp-l); }
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: var(--sp-s) var(--sp-xs); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { width: 9rem; text-align: center; font-size: var(--fs-m); font-weight: 700; }
.compare thead th:last-child { color: var(--berry-strong); }
.compare tbody th[scope="row"] { font-weight: inherit; }
.compare .li-title, .compare .li-meta { display: block; }
/* Each feature's name opens its page in the manual: underlined, quietly,
   so a column of them reads as names first and links second. */
.compare .li-title a { text-decoration-color: var(--line-strong); }
.compare .li-title a:hover { color: var(--berry-strong); text-decoration-color: currentColor; }
.compare .li-meta { margin-top: var(--sp-3xs); }
.compare td { text-align: center; }
.compare td > .ico { display: block; margin: var(--sp-3xs) auto 0; }
.compare-group th { padding-top: var(--sp-xl); font-size: var(--fs-l); font-weight: 600; }
.compare-yes { color: var(--ok); }
.compare-no { color: var(--faint); }
.compare-word { font-size: var(--fs-s); font-weight: 600; }

@media (max-width: 860px) {
  .plan-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .compare-card { padding: var(--sp-xs) var(--sp-s) var(--sp-m); }
  .compare thead th { width: 4.5rem; font-size: var(--fs-s); }
  .compare th, .compare td { padding: var(--sp-s) var(--sp-2xs); }
}

/* ---------- Documents: policies/, compare/jelly-vs-*, integrations/, contact/ ---------- */

/* A page of reading: the section's pages down the left (the one open
   wearing aria-current), the words on the right. A page with no
   section (contact/) is .doc--solo. Narrower, the list wraps above. */
.doc {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-4xl) var(--gutter);
  display: grid;
  grid-template-columns: 14rem minmax(0, 46rem);
  justify-content: center;
  gap: var(--sp-4xl);
  align-items: start;
}
.doc--solo { grid-template-columns: minmax(0, 46rem); }
.doc-nav { position: sticky; top: var(--sp-l); display: grid; gap: var(--sp-xs); }
.doc-nav-title { padding: 0 var(--sp-s); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.doc-nav ul { display: grid; gap: var(--sp-3xs); }
.doc-nav a {
  display: block;
  padding: var(--sp-xs) var(--sp-s);
  border-radius: 8px;
  font-size: var(--fs-s);
  color: var(--muted);
  text-decoration: none;
}
.doc-nav a:hover { background: var(--hover); color: var(--ink); }
.doc-nav a[aria-current="page"] { background: var(--berry-soft); color: var(--berry-strong); font-weight: 600; }
.doc-nav .doc-nav-gap { margin-top: var(--sp-xs); padding-top: var(--sp-xs); border-top: 1px solid var(--line); }
.doc-head { display: grid; gap: var(--sp-s); margin-bottom: var(--sp-2xl); }
.doc-pre { font-size: var(--fs-l); font-weight: 600; color: var(--berry-strong); }

/* The words themselves: a policy, a comparison, an integration. */
.prose { font-size: var(--fs-m); line-height: 1.65; text-wrap: pretty; overflow-wrap: break-word; }
.prose > * + * { margin-top: var(--sp-m); }
.prose h2 {
  margin-top: var(--sp-2xl);
  font-family: var(--display);
  font-size: var(--fs-xl);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.prose h3 { margin-top: var(--sp-xl); font-size: var(--fs-l); line-height: 1.3; }
.prose h4 { margin-top: var(--sp-l); font-size: var(--fs-m); }
.prose ul { padding-left: var(--sp-l); list-style: disc; }
.prose ol { padding-left: var(--sp-l); list-style: decimal; }
.prose ol[type="a"] { list-style: lower-alpha; }
.prose ol[type="i"] { list-style: lower-roman; }
.prose li + li, .prose li > ul, .prose li > ol, .prose li > p + p { margin-top: var(--sp-xs); }
.prose a { color: var(--berry-strong); font-weight: 600; }
.prose code { font-size: var(--fs-s); }
.prose small { font-size: var(--fs-s); color: var(--muted); }
.prose hr { margin-top: var(--sp-2xl); border: 0; border-top: 1px solid var(--line); }
.prose hr + * { margin-top: var(--sp-2xl); }
/* The changelog (changelog/, written by cmd/marketinggen from the
   app's own entries): each entry an article under a rule, its heading
   a link to itself, its date under it; the words are prose. */
.changelog-entry + .changelog-entry { margin-top: var(--sp-2xl); padding-top: var(--sp-xl); border-top: 1px solid var(--line); }
.changelog-entry h2 { margin-top: 0; }
.changelog-entry h2 a { color: inherit; font-weight: inherit; text-decoration: none; }
.changelog-entry h2 a:hover { text-decoration: underline; }
.changelog-entry > * + * { margin-top: var(--sp-m); }
.prose .changelog-date { margin-top: var(--sp-xs); font-size: var(--fs-s); color: var(--muted); }
.changelog-entry img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; }
/* Ten entries a page: Newer at the left, where the page is, Older at
   the right, under a rule, each end kept by an empty span when there is
   nowhere to go. */
.changelog-pages { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-m); margin-top: var(--sp-2xl); padding-top: var(--sp-l); border-top: 1px solid var(--line); font-size: var(--fs-s); color: var(--muted); }
.changelog-pages a { color: var(--berry-strong); font-weight: 600; }
.changelog-pages a[rel="next"] { justify-self: end; }
.prose-box { padding: var(--sp-l); border-radius: 12px; background: var(--sheet); box-shadow: var(--card); }
.prose-box > * + * { margin-top: var(--sp-xs); }
.prose-box h3 { margin-top: 0; }
.prose-scroll { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); line-height: 1.5; }
.prose th, .prose td { padding: var(--sp-xs) var(--sp-s); border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose thead th { background: var(--wash-stone); }
/* The sums for a team of six (flat-price page, the four-way comparison):
   Jelly's row first, in the page's berry, and the caption above. */
.price-maths caption { padding-bottom: var(--sp-xs); text-align: left; font-weight: 600; color: var(--muted); }
.price-maths tbody tr:first-child { background: var(--berry-soft); }
.price-maths--plain tbody tr:first-child { background: none; }

@media (max-width: 860px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xl); padding-block: var(--sp-xl) var(--sp-3xl); }
  .doc-nav { position: static; }
  .doc-nav ul { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); }
  .doc-nav .doc-nav-gap { margin-top: 0; padding-top: 0; border-top: 0; }
  .site-foot { grid-template-columns: repeat(3, auto); justify-content: start; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .prose h2 { margin-top: var(--sp-xl); }
  .site-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- A page for one kind of team: for/churches/ ---------- */

/* The hero centred, then a feature to a row, words beside the app's
   own picture of it, taking turns on which side the picture sits. */
.landing-hero {
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--sp-5xl) var(--gutter) 0;
  display: grid;
  gap: var(--sp-l);
  justify-items: center;
  text-align: center;
}
.landing-pre { font-size: var(--fs-l); font-weight: 600; color: var(--berry-strong); }
.landing-hero .lede { max-width: 32em; }
.landing-features { display: grid; gap: var(--sp-5xl); }
.landing-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-3xl);
  align-items: center;
}
.landing-row:nth-child(even) .landing-copy { order: 2; }
.landing-copy { display: grid; gap: var(--sp-s); }
.landing-kicker { display: flex; align-items: center; gap: var(--sp-xs); font-size: var(--fs-s); font-weight: 600; color: var(--berry-strong); }
.landing-copy h2 {
  font-family: var(--display);
  font-size: var(--fs-2xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.landing-copy p:not(.landing-kicker) { font-size: var(--fs-l); color: var(--muted); text-wrap: pretty; }
.landing-copy a { color: var(--berry-strong); font-weight: 600; }
/* A picture in the page is cropped onto its feature: --zoom is how far
   in, --fx and --fy where the crop starts, as fractions of the whole
   picture's width and height (every picture is 4:3, like its frame).
   It is a link to the whole screen, which lightbox.js opens over the
   page; with scripts off the link opens the picture itself. */
.landing-shot__link {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: var(--sheet);
  box-shadow: var(--card);
  cursor: zoom-in;
}
.landing-shot__link img {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--zoom, 1) * 100%);
  max-width: none;
  height: auto;
  transform: translate(calc(var(--fx, 0) * -100%), calc(var(--fy, 0) * -100%));
}
.landing-shot__hint {
  position: absolute;
  right: var(--sp-s);
  bottom: var(--sp-s);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  min-height: 32px;
  padding: 0 var(--sp-s);
  border-radius: 999px;
  background: hsl(240 5% 15% / 0.78);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: background 0.15s;
}
.landing-shot__link:hover .landing-shot__hint, .landing-shot__link:focus-visible .landing-shot__hint { background: var(--berry-fill); }

/* The whole screen, over the page (lightbox.js): the picture as large
   as the window allows, Close above it, and the page dimmed behind. */
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--sp-3xl) var(--sp-m) var(--sp-m);
  border: 0;
  background: transparent;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: hsl(240 5% 10% / 0.82); }
.lightbox img {
  max-width: min(100%, 1600px);
  max-height: calc(100dvh - var(--sp-3xl) - var(--sp-m));
  width: auto;
  height: auto;
  border-radius: 10px;
  background: var(--sheet);
  box-shadow: var(--lift);
  cursor: zoom-out;
}
.lightbox-close {
  position: fixed;
  top: var(--sp-s);
  right: var(--sp-s);
  min-height: 36px;
  padding: 0 var(--sp-m);
  border: 0;
  border-radius: 999px;
  background: var(--sheet);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}
.landing-quote { max-width: 52rem; display: grid; gap: var(--sp-2xl); text-align: center; }
.landing-quote .story-quote { text-align: left; }
.landing-quote .lede { margin-inline: auto; }
.price-plan a:not(.pill) { color: var(--berry-strong); font-weight: 600; }

@media (max-width: 860px) {
  .landing-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-l); }
  .landing-row:nth-child(even) .landing-copy { order: 0; }
  .landing-features { gap: var(--sp-4xl); }
}
@media (max-width: 560px) {
  .landing-hero { padding-top: var(--sp-3xl); }
}