/* LANCERING-11: the website. Sandsten, the app's default theme, in dark
   (apps/client/src/theme/standard/themes.ts, the tokens as the app computes
   them, and themes.css: the grain, the tight corners, the short hard
   shadows), with the app's display face, so the list on the front page and
   the app behind the button are one material. One mode: the page is a
   stage for the app. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/fonts/schibsted-grotesk-latin-wght-normal.woff2)
    format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2)
    format("woff2-variations");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --canvas: #221e1a;
  --surface: #2a2520;
  --raised: #302a24;
  --sunken: #1a1613;
  --hover: rgb(231 223 210 / 0.05);
  --pressed: rgb(231 223 210 / 0.09);
  --selected: #37322c;
  --fg: #e7dfd2;
  --fg-2: #bab0a1;
  /* The material's own third step (the app lifts it to the second for
     washed rows); 4.5:1 on canvas, surface and raised. */
  --fg-3: #9b907f;
  --border: #3a342c;
  --border-strong: #7b7364;
  --rail: #534a3f;
  --accent: #6dcdc0;
  --accent-hover: #82d7cb;
  --accent-subtle: #374740;
  --on-accent: #1a1613;
  --success: #7fcf9f;
  --warning: #e9c07c;
  --info: #96c6e8;
  --hue-red: #ff8b7e;
  --hue-orange: #f7a26b;
  --hue-yellow: #ecc35c;
  --hue-green: #6acb86;
  --hue-blue: #82b1f4;
  --hue-purple: #b9a3f7;
  --hue-pink: #f29bc4;
  --avatar-1-bg: #1c3a33;
  --avatar-1-fg: #8fd9c6;
  --avatar-2-bg: #1d2f4d;
  --avatar-2-fg: #a9c8f5;
  --avatar-3-bg: #3a2e14;
  --avatar-3-fg: #f0c987;
  --avatar-4-bg: #3f2226;
  --avatar-4-fg: #f4aeb6;
  --avatar-5-bg: #2c2545;
  --avatar-5-fg: #c7b8f5;
  --avatar-6-bg: #2a322e;
  --avatar-6-fg: #c9d1cd;
  /* Sandsten's corners and its light from the side: a short hard edge
     under a soft fall. */
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 5px;
  --r-xl: 6px;
  --r-2xl: 8px;
  --shadow-lift: 0 2px 0 rgb(0 0 0 / 0.3), 0 12px 24px -6px rgb(0 0 0 / 0.5);
  --shadow-window:
    0 2px 0 rgb(0 0 0 / 0.35), 0 28px 56px -16px rgb(0 0 0 / 0.6);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --header: 60px;
  color-scheme: dark;
  font-family:
    "Schibsted Grotesk",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}
html {
  scroll-padding-top: calc(var(--header) + 16px);
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--fg);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* The grain: one still layer over the page, as in the app. A file, not a
   data: address (the CSP allows only the site's own images). The header
   and the pictures of the app lie above it. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background-image: url(/img/grain.svg);
  background-size: 256px 256px;
  opacity: 0.09;
}
@media print {
  body::after {
    display: none;
  }
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 0.16em;
  transition: text-decoration-color 100ms var(--ease);
}
a:hover {
  text-decoration-color: currentColor;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-md);
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}
.skip:focus {
  left: 16px;
}
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Buttons ------------------------------------------------------------ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 100ms var(--ease),
    color 100ms var(--ease);
}
.button:hover {
  background: var(--accent-hover);
}
.button.quiet {
  background: var(--pressed);
  color: var(--fg);
}
.button.quiet:hover {
  background: rgb(231 223 210 / 0.14);
}
.button.big {
  height: 48px;
  padding: 0 22px;
  font-size: 1rem;
  border-radius: var(--r-xl);
}
.button:focus-visible {
  outline-offset: 3px;
}

/* --- Header ------------------------------------------------------------- */
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header);
  background: rgb(34 30 26 / 0.76);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.top.is-scrolled {
  border-bottom-color: var(--border);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}
.top nav {
  margin-inline: auto;
}
.top nav ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.top nav a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  color: var(--fg-2);
  text-decoration: none;
  transition:
    color 100ms var(--ease),
    background-color 100ms var(--ease);
}
.top nav a:hover {
  color: var(--fg);
  background: var(--hover);
}
.top .cta-row {
  display: flex;
  gap: 8px;
}
.top .button {
  height: 34px;
  padding: 0 14px;
  font-size: 0.875rem;
}
@media (max-width: 767px) {
  .top nav {
    display: none;
  }
  .top .wrap {
    justify-content: space-between;
  }
  .top .cta-row .quiet {
    display: none;
  }
}

/* --- Front page: the hero and the living list --------------------------- */
.hero {
  padding-block: clamp(40px, 9vh, 112px) 0;
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.5rem, 1rem + 5vw, 5.75rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 12ch;
}
.hero h1 > span {
  display: block;
}
.hero h1 .word {
  display: inline-block;
  white-space: pre;
}
.hero .lead {
  margin-top: clamp(20px, 3vh, 32px);
  max-width: 34ch;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  line-height: 1.45;
  color: var(--fg-2);
}
.hero .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(24px, 4vh, 40px);
}
.hero .fine {
  margin-top: 16px;
  font-size: 0.875rem;
  color: var(--fg-3);
}

.stage {
  position: relative;
  height: clamp(440px, 60vh, 640px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background: var(--surface);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.stage-top {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
}
.stage-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* The workspace's mark, a letter on a tile, as in the app's sidebar. */
.stage-name i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-md);
  background: var(--accent-subtle);
  color: var(--accent);
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 600;
}
.stage-tabs {
  display: flex;
  gap: 2px;
  margin-left: 6px;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  color: var(--fg-2);
}
.tab[aria-selected="true"] {
  background: var(--selected);
  color: var(--fg);
}
.tab b {
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stage-me {
  margin-left: auto;
}
.rows {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.row {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  column-gap: 10px;
  padding: 12px 16px 11px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.row-icon {
  margin-top: 3px;
  width: 14px;
  height: 14px;
}
.row-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.type-bug .row-icon {
  color: var(--hue-red);
}
.type-doc .row-icon {
  color: var(--hue-orange);
}
.type-question .row-icon {
  color: var(--hue-blue);
}
.type-decision .row-icon {
  color: var(--hue-green);
}
.type-idea .row-icon {
  color: var(--hue-yellow);
}
.type-status .row-icon {
  color: var(--hue-pink);
}
.type-meeting .row-icon {
  color: var(--hue-purple);
}
.row.is-resolved .row-icon {
  color: var(--fg-3);
}
.row-title {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-side {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  line-height: 20px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.row-side .count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.row-side svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.row-meta {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 0.8125rem;
  line-height: 18px;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
}
.row-meta .group {
  color: var(--fg-3);
}
.row-meta .group::before {
  content: "#";
  margin-right: 1px;
}
.row-meta .resolved {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fg);
  font-weight: 500;
}
.row-meta .resolved svg {
  width: 13px;
  height: 13px;
  stroke: var(--success);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.row-meta .agent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.row-meta .agent::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hue-purple);
}
.row-who {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  display: flex;
}
.avatar {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0;
  background: var(--avatar-6-bg);
  color: var(--avatar-6-fg);
}
.avatar.tone-1 {
  background: var(--avatar-1-bg);
  color: var(--avatar-1-fg);
}
.avatar.tone-2 {
  background: var(--avatar-2-bg);
  color: var(--avatar-2-fg);
}
.avatar.tone-3 {
  background: var(--avatar-3-bg);
  color: var(--avatar-3-fg);
}
.avatar.tone-4 {
  background: var(--avatar-4-bg);
  color: var(--avatar-4-fg);
}
.avatar.tone-5 {
  background: var(--avatar-5-bg);
  color: var(--avatar-5-fg);
}
.avatar.tone-6 {
  background: var(--avatar-6-bg);
  color: var(--avatar-6-fg);
}
.avatar.tone-agent {
  background: var(--accent-subtle);
  color: var(--accent);
  border-radius: var(--r-md);
}
.avatar.me {
  width: 24px;
  height: 24px;
  font-size: 0.625rem;
}
.row.is-waiting .row-title::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 2px;
}

@media (max-width: 959px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }
  .hero h1 {
    max-width: 14ch;
  }
  .stage {
    height: clamp(360px, 52vh, 520px);
  }
  .row-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}
@media (max-width: 479px) {
  .stage-tabs {
    display: none;
  }
}

/* The entrance (one sequence, once). Without scripts nothing is hidden. */
.js .rise {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 800ms var(--ease) both;
}
/* The words land one by one (landing.js); if the script never comes, the
   headline rises as one. */
.js .hero h1:not(.is-split) {
  opacity: 0;
  animation: appear 600ms var(--ease) 1200ms both;
}
.js .hero .lead {
  animation-delay: 500ms;
}
.js .hero .cta-row {
  animation-delay: 620ms;
}
.js .hero .fine {
  animation-delay: 720ms;
}
@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}
.js .stage {
  opacity: 0;
  animation: appear 900ms var(--ease) 350ms both;
}
@keyframes appear {
  to {
    opacity: 1;
  }
}
.js .row {
  opacity: 0;
  animation: rise 600ms var(--ease) both;
  animation-delay: calc(500ms + var(--i) * 45ms);
}
.row:nth-child(1) {
  --i: 0;
}
.row:nth-child(2) {
  --i: 1;
}
.row:nth-child(3) {
  --i: 2;
}
.row:nth-child(4) {
  --i: 3;
}
.row:nth-child(5) {
  --i: 4;
}
.row:nth-child(6) {
  --i: 5;
}
.row:nth-child(7) {
  --i: 6;
}
.row:nth-child(8) {
  --i: 7;
}
.row:nth-child(9) {
  --i: 8;
}
.row:nth-child(n + 10) {
  --i: 9;
}
/* Once the list is live, a row that moves to the top is not arriving: it
   keeps standing while the bump (landing.js) slides it. */
.js .rows.is-live .row {
  opacity: 1;
  animation: none;
}

/* --- Front page: the wall ----------------------------------------------- */
.wall {
  margin-top: clamp(72px, 12vh, 160px);
}
.wall-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 316px;
  gap: 12px;
}
.moment {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background: var(--surface);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.moment.span-2 {
  grid-column: span 2;
}
.moment .ui {
  flex: 1;
  min-height: 0;
  padding: 18px 18px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
.moment .cap {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.moment h3 {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.moment .cap p {
  margin-top: 3px;
  color: var(--fg-2);
  text-wrap: pretty;
}
.moment svg {
  width: 14px;
  height: 14px;
  flex: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.moment code {
  font-family: inherit;
  font-weight: 500;
  color: var(--fg);
}
.moment .q {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.moment .btn {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-lg);
  font-weight: 500;
  color: var(--on-accent);
  background: var(--accent);
  transition:
    transform 120ms var(--ease),
    filter 120ms var(--ease);
}
.moment .btn.quiet {
  color: var(--fg);
  background: var(--selected);
}
.moment .btn.is-pressed {
  transform: scale(0.96);
  filter: brightness(1.15);
}
/* What comes later is hidden until its moment; without scripts every
   tile shows how it ends. */
.js .moment .later {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 360ms var(--ease),
    transform 360ms var(--ease);
}
.js .moment .is-on .later,
.js .moment .is-on.later {
  opacity: 1;
  transform: none;
}
html:not(.js) .moment .early {
  display: none;
}
.js .moment .early {
  transition: opacity 200ms var(--ease-exit);
}
.js .moment .is-on .early,
.js .moment .is-on.early {
  opacity: 0;
  pointer-events: none;
}

/* The approval */
.m-approval .card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--raised);
  max-width: 440px;
}
.m-approval .card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-2);
}
.m-approval .card-head b {
  font-weight: 500;
  color: var(--fg);
}
.m-approval .card p {
  margin-top: 10px;
  color: var(--fg-2);
}
.m-approval .card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.m-approval .card-ok {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  margin-top: -28px;
  font-weight: 500;
  color: var(--success);
}
.m-approval .line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--fg-2);
}
.m-approval .line + .line {
  margin-top: 10px;
}
.m-approval .line .avatar {
  flex: none;
}
.m-approval .line svg {
  color: var(--hue-purple);
}
.m-approval .line b {
  font-weight: 500;
  color: var(--fg);
}

/* The poll */
.poll {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.poll li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  height: 32px;
  align-items: center;
  padding: 0 10px;
  margin-top: 6px;
  border-radius: var(--r-lg);
  background: var(--selected);
  overflow: hidden;
}
.poll li b {
  font-weight: 500;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.poll .bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--accent-subtle);
  border-right: 2px solid var(--accent);
  transition: width 1100ms var(--ease);
}
.poll li span,
.poll li b {
  position: relative;
}
.poll.is-on li:nth-child(1) .bar {
  width: 62%;
}
.poll.is-on li:nth-child(2) .bar {
  width: 31%;
  transition-delay: 80ms;
}
.poll.is-on li:nth-child(3) .bar {
  width: 8%;
  transition-delay: 160ms;
}
.m-poll .decided {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-weight: 500;
}
.m-poll .decided svg {
  color: var(--success);
}

/* Waiting for you */
.wait-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
}
.wait-head b {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  transition: transform 200ms var(--ease);
}
.wait-head b.is-zero {
  background: var(--selected);
  color: var(--fg-2);
}
.wait-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 500ms var(--ease);
}
.wait-wrap.is-on {
  grid-template-rows: 0fr;
}
.wait {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  min-height: 0;
  overflow: hidden;
}
.wait li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  transition:
    opacity 400ms var(--ease),
    text-decoration-color 300ms var(--ease);
  text-decoration: line-through transparent;
}
.wait li svg {
  margin-top: 2px;
  color: var(--accent);
}
.wait li.is-on {
  opacity: 0.35;
  text-decoration-color: currentColor;
}
.wait li.is-on svg {
  color: var(--fg-3);
}
.m-waiting .empty {
  margin-top: 12px;
  color: var(--fg-2);
}

/* Ask Pinn */
.ask {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: var(--raised);
  font-size: 0.9375rem;
}
.pinn-mark {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: conic-gradient(
    from 200deg,
    var(--accent),
    var(--hue-pink),
    var(--hue-blue),
    var(--accent)
  );
}
.ask .caret {
  width: 1.5px;
  height: 18px;
  margin-left: -6px;
  background: var(--fg);
  opacity: 0;
}
.js .ask.is-typing .caret {
  opacity: 1;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink {
  to {
    opacity: 0;
  }
}
.m-pinn .answer {
  margin-top: 14px;
  padding-left: 26px;
  max-width: 52ch;
}
.m-pinn .answer p {
  font-size: 0.9375rem;
  line-height: 1.45;
}
.sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.sources span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg-2);
  font-size: 0.75rem;
}
.sources span:nth-child(1) svg {
  color: var(--hue-blue);
}
.sources span:nth-child(2) svg {
  color: var(--hue-orange);
}

/* The clip */
.player {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--r-xl);
  background: var(--raised);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.player .play {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fg);
  color: var(--canvas);
}
.player .play svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
  stroke: none;
  margin-left: 1px;
}
.player b {
  font-weight: 500;
  color: var(--fg-2);
}
.wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
}
.wave i {
  flex: 1;
  height: 30%;
  border-radius: 2px;
  background: var(--fg-3);
  transform-origin: center;
}
.wave i:nth-child(3n) {
  height: 60%;
}
.wave i:nth-child(4n + 1) {
  height: 90%;
}
.wave i:nth-child(5n + 2) {
  height: 45%;
}
.js .player.is-on .wave i {
  background: var(--hue-purple);
  animation: wave 900ms ease-in-out infinite alternate;
}
.js .player.is-on .wave i:nth-child(2n) {
  animation-duration: 700ms;
}
.js .player.is-on .wave i:nth-child(3n) {
  animation-delay: -300ms;
}
@keyframes wave {
  from {
    transform: scaleY(0.35);
  }
  to {
    transform: scaleY(1);
  }
}
.lines {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--fg-2);
}
.lines li {
  padding: 5px 0;
}
.m-clip .tags {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.m-clip .tags span {
  padding: 3px 8px;
  border-radius: var(--r-md);
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 500;
  font-size: 0.75rem;
}

/* The post's own work */
.props {
  display: grid;
  gap: 2px;
  margin: 14px 0 0;
}
.props > div {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  min-height: 34px;
  border-top: 1px solid var(--border);
}
.props dt {
  color: var(--fg-3);
}
.props dd {
  position: relative;
  margin: 0;
  color: var(--fg-2);
}
.props dd .later {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  color: var(--fg);
}
.props .who {
  gap: 8px;
}
.props .hi {
  color: var(--hue-orange);
}
.chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-md);
  background: var(--selected);
  font-size: 0.75rem;
  font-weight: 500;
}
.chip.doing {
  background: var(--accent-subtle);
  color: var(--accent);
}

/* Connect */
.services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.services li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--raised);
  font-weight: 500;
}
.services li > span:first-of-type {
  flex: 1;
}
.services .logo {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-md);
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--canvas);
  background: var(--fg);
}
.services .logo.sl {
  background: var(--hue-pink);
}
.services .logo.li {
  background: var(--hue-purple);
}
.services .logo.fi {
  background: var(--hue-orange);
}
.services li {
  position: relative;
}
.services .on {
  position: absolute;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--success);
  font-weight: 500;
}
.services .on svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
}

/* Import */
.imp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
}
.imp-head svg {
  color: var(--fg-3);
}
.chan {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  max-width: 460px;
}
.chan li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  padding: 8px 0;
  font-variant-numeric: tabular-nums;
}
.chan li b {
  font-weight: 500;
  color: var(--fg-2);
}
.chan .bar {
  grid-column: 1 / -1;
  display: block;
  height: 3px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--selected);
  overflow: hidden;
}
.chan .bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 2200ms var(--ease);
}
.chan.is-on li:nth-child(1) .bar::after {
  width: 100%;
}
.chan.is-on li:nth-child(2) .bar::after {
  width: 100%;
  transition-delay: 300ms;
}
.chan.is-on li:nth-child(3) .bar::after {
  width: 100%;
  transition-delay: 600ms;
}
.m-import .done {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  max-width: 460px;
  color: var(--fg-2);
}
.m-import .done svg {
  margin-top: 2px;
  color: var(--success);
}

@media (max-width: 1023px) {
  .wall-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 599px) {
  .wall-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 300px;
  }
  .moment.span-2 {
    grid-column: auto;
  }
  .services {
    grid-template-columns: 1fr;
  }
}

/* --- Front page: the pictures ------------------------------------------ */
/* Rally on a Mac, as large as the page allows, with the chapters under it
   as captions that turn by themselves. */
.pictures {
  margin-top: clamp(40px, 6vh, 88px);
}
.pic-stage {
  position: relative;
  /* Above the grain: the pictures are the app itself. */
  z-index: 11;
  aspect-ratio: 1840 / 1057;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background: var(--sunken);
  box-shadow: var(--shadow-window);
}
.pic-stage figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.015);
  transition:
    opacity 550ms var(--ease),
    transform 1200ms var(--ease);
}
.pic-stage figure.is-active {
  opacity: 1;
  transform: none;
}
.pic-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pic-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(24px, 4vh, 40px);
}
.pic-tabs button {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--fg-3);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 300ms var(--ease);
}
.pic-tabs button:hover {
  color: var(--fg-2);
}
.pic-tabs button[aria-selected="true"] {
  color: var(--fg);
}
.pic-tabs button:focus-visible {
  outline-offset: 4px;
}
.pic-title {
  display: block;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.pic-body {
  display: block;
  margin-top: 8px;
  max-width: 44ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fg-3);
  transition: color 300ms var(--ease);
}
.pic-tabs button[aria-selected="true"] .pic-body {
  color: var(--fg-2);
}
/* The line over the chapter fills in the time its picture stays. */
.pic-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
}
@media (max-width: 767px) {
  .pic-tabs {
    grid-template-columns: 1fr;
    margin-top: 16px;
  }
  .pic-tabs button {
    padding: 14px 0 16px;
  }
}
/* Without scripts every picture is on the page. */
html:not(.js) .pic-stage {
  aspect-ratio: auto;
  overflow: visible;
  background: none;
  box-shadow: none;
  display: grid;
  gap: 16px;
}
html:not(.js) .pic-stage figure {
  position: static;
  opacity: 1;
  transform: none;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-window);
}

/* --- Front page: what is in it, IT and the last word -------------------- */
.features {
  margin-top: clamp(80px, 14vh, 180px);
}
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(32px, 5vh, 56px);
}
.section-head h2 {
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);
  letter-spacing: -0.03em;
  max-width: 14ch;
}
.section-head p {
  font-size: 1.0625rem;
  color: var(--fg-2);
  max-width: 48ch;
}
.features dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 80px);
  margin: 0;
}
.features dl > div {
  padding: 26px 0 28px;
  border-top: 1px solid var(--border);
}
.features dt {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.features dd {
  margin: 8px 0 0;
  max-width: 44ch;
  color: var(--fg-2);
  line-height: 1.5;
}
@media (max-width: 767px) {
  .section-head,
  .features dl {
    grid-template-columns: 1fr;
  }
  .section-head {
    gap: 12px;
  }
}

.it {
  margin-top: clamp(64px, 10vh, 120px);
  padding-block: clamp(40px, 6vh, 72px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.it .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 5vw, 80px);
}
.it h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
  letter-spacing: -0.025em;
  max-width: 14ch;
}
.it p {
  color: var(--fg-2);
  max-width: 58ch;
  line-height: 1.55;
}
.it ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}
.it ul a {
  color: var(--fg);
}
@media (max-width: 767px) {
  .it .wrap {
    grid-template-columns: 1fr;
  }
}

.final {
  padding-block: clamp(80px, 16vh, 200px) clamp(64px, 12vh, 160px);
  text-align: left;
}
.final h2 {
  font-size: clamp(2.125rem, 1.1rem + 3.6vw, 4.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  max-width: 16ch;
}
.final .cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-top: clamp(24px, 4vh, 40px);
}
.final .fine {
  font-size: 0.9375rem;
  color: var(--fg-3);
}

/* --- Footer ------------------------------------------------------------- */
.bottom {
  padding-block: 32px 40px;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--fg-3);
}
.bottom nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bottom nav + nav {
  margin-top: 10px;
}
.bottom a {
  color: var(--fg-2);
  text-decoration: none;
}
.bottom a:hover {
  color: var(--fg);
}
.bottom p {
  margin-top: 16px;
}

/* --- The other pages (prices, download, support, legal) ----------------- */
.page-head {
  padding-block: clamp(48px, 9vh, 112px) clamp(32px, 5vh, 56px);
}
.page-head h1 {
  font-size: clamp(2.125rem, 1.1rem + 3vw, 3.75rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.page-head .lead,
.prose .lead {
  margin-top: 20px;
  max-width: 54ch;
  font-size: 1.1875rem;
  line-height: 1.45;
  color: var(--fg-2);
}
.page-head p + p {
  margin-top: 20px;
}
.grid {
  display: grid;
  gap: 1px;
  margin-block: 0 clamp(40px, 7vh, 80px);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.card {
  padding: 28px 24px 30px;
  background: var(--surface);
}
.card h2,
.card h3 {
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}
.card p {
  margin-top: 10px;
  color: var(--fg-2);
}
.card p a {
  color: var(--fg);
}
.card .button {
  margin-top: 8px;
}
.card .fine {
  font-size: 0.875rem;
  color: var(--fg-3);
}
.card code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.875em;
  color: var(--fg);
}
.plan .price {
  margin-top: 18px;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}
.plan .per {
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--fg-3);
}
.plan .who {
  margin-top: 14px;
  color: var(--fg-2);
}
.plan ul {
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: var(--fg-2);
  font-size: 0.9375rem;
}
.plan ul li {
  padding-left: 18px;
  position: relative;
}
.plan ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--border-strong);
}
.plan.featured {
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.section {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  letter-spacing: -0.025em;
  margin-top: clamp(40px, 7vh, 80px);
}
.faq {
  padding-bottom: clamp(48px, 9vh, 112px);
  max-width: 68ch;
}
.faq h2.section:first-child {
  margin-top: 0;
}
.faq h3 {
  margin-top: 28px;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.faq p {
  margin-top: 8px;
  color: var(--fg-2);
}
.faq ol,
.faq ul {
  margin: 12px 0 0;
  padding-left: 22px;
  color: var(--fg-2);
}
.faq li + li {
  margin-top: 8px;
}
.faq a,
.prose a {
  color: var(--fg);
}
.band {
  margin-block: clamp(40px, 7vh, 80px);
  padding: clamp(28px, 4vh, 40px);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background: var(--surface);
}
.band p {
  margin-top: 12px;
  color: var(--fg-2);
  max-width: 68ch;
}
.prose {
  padding-block: clamp(48px, 9vh, 112px);
  max-width: 72ch;
}
.prose h1 {
  font-size: clamp(2rem, 1.1rem + 2.6vw, 3.25rem);
  letter-spacing: -0.035em;
}
.prose section {
  margin-top: 40px;
}
.prose h2 {
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}
.prose p {
  margin-top: 12px;
  color: var(--fg-2);
}
.prose .note {
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  background: rgb(233 192 124 / 0.12);
  color: var(--warning);
}
.prose .fine {
  margin-top: 40px;
  font-size: 0.875rem;
  color: var(--fg-3);
}
.legal-nav {
  margin-bottom: 32px;
}
.legal-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}
.legal-nav a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--r-md);
  color: var(--fg-2);
  text-decoration: none;
  background: var(--hover);
}
.legal-nav a:hover {
  color: var(--fg);
  background: var(--pressed);
}
.legal-nav a[aria-current="page"] {
  color: var(--fg);
  background: var(--selected);
}
.table {
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
th,
td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
th {
  font-weight: 500;
  color: var(--fg);
  background: var(--surface);
}
td {
  color: var(--fg-2);
}
tr:last-child td {
  border-bottom: 0;
}
@media (max-width: 959px) {
  .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .grid.three,
  .grid.four {
    grid-template-columns: 1fr;
  }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}

/* A grid straight in a .wrap: the gutter stays outside the frame. */
.wrap.grid {
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--wrap) - 2 * var(--gutter));
  padding-inline: 0;
}