/* Homepage and About. Uses tokens.css and site.css. */

/* how it works: a stone stage like the rest of the page; the scene is drawn by StageGraph */
.story__stage.story__stage--ill {
  background: var(--stone);
  color: var(--ink);
}

/* watch it work: the two-line title on the left, the pitch and a way to try it on the right */
.watch__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
  margin-bottom: clamp(32px, 4vw, 64px);
}
.watch__title span {
  display: block;
}
.watch__side {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.4vw, 40px);
}
.watch__side .btn {
  flex: none;
}
.watch__body {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 46ch;
}
.watch__video {
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 1600 / 686;
}
.watch__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* next step: two ways in */
.next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* about */
.about {
  padding-top: calc(var(--header) + clamp(56px, 6vw, 120px));
}
.about__title {
  font-size: var(--t-h1);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 18ch;
}
.about__lead {
  margin-top: 24px;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 52ch;
}
.team-grid {
  list-style: none;
  margin-top: clamp(48px, 5vw, 96px);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 144px));
  justify-content: space-between;
  gap: clamp(28px, 3vw, 56px) 16px;
}
.member {
  outline: none;
  cursor: default;
}
/* about: the story, what we believe, and where to find us, under the team */
.about {
  padding-bottom: clamp(48px, 6vw, 112px);
}
.about__h2 {
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.about__story {
  margin-top: clamp(80px, 9vw, 160px);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.about__story p {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
}
/* what we believe: plain type in rows divided by thin lines, laid out like the other about sections */
.about__beliefs {
  margin-top: clamp(80px, 9vw, 160px);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.beliefs {
  list-style: none;
}
.beliefs li {
  padding: 24px 0;
  border-top: 1px solid var(--stone-2);
}
.beliefs li:first-child {
  padding-top: 0;
  border-top: 0;
}
.beliefs h3 {
  font-size: var(--t-h4);
  line-height: 1.2;
}
.beliefs p {
  margin-top: 8px;
  max-width: 56ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
}
.about__where {
  margin-top: clamp(80px, 9vw, 160px);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.about__where p {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-2);
}
.about__where a {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--fs-lead);
  color: var(--ink);
  border-bottom: 1px solid currentColor;
}
@media (max-width: 900px) {
  .about__story,
  .about__where,
  .about__beliefs {
    grid-template-columns: 1fr;
  }
}
.member__photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--backdrop-cream);
  transition: transform 0.45s var(--ease);
}
/* the backdrop shows through a cut-out photo, and on hover it fades up behind the name */
[data-backdrop] {
  background-color: var(--backdrop);
}
[data-backdrop='cream'] {
  --backdrop: var(--backdrop-cream);
}
[data-backdrop='blue'] {
  --backdrop: var(--backdrop-blue);
}
[data-backdrop='clay'] {
  --backdrop: var(--backdrop-clay);
}
[data-backdrop='sage'] {
  --backdrop: var(--backdrop-sage);
}
[data-backdrop='mauve'] {
  --backdrop: var(--backdrop-mauve);
}
[data-backdrop='teal'] {
  --backdrop: var(--backdrop-teal);
}
.member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* on hover the circle pops, and the name comes up low on a fade of the backdrop colour, so the face stays clear */
.member__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--backdrop, var(--amber)) 0,
    transparent 42%
  );
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.member__name {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: end center;
  padding-bottom: 12%;
  font-size: var(--t-body2);
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition:
    opacity 0.35s var(--ease),
    transform 0.45s var(--ease);
}
/* a mouse hover or a keyboard focus pops the circle, and the name comes up low on a fade of the backdrop colour */
.member:focus .member__photo {
  transform: scale(1.06);
}
.member:focus .member__photo::after {
  opacity: 1;
}
/* white would vanish on cream */
[data-backdrop='cream'] .member__name {
  color: var(--on-cream);
}
/* a team member with more photos: on hover one of them fades in over the photo */
.member__fun {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.member:focus .member__fun.is-on {
  opacity: 1;
}
/* both photos are cut out, so the photo fades out as the fun photo fades in */
.member--fun .member__photo img:not(.member__fun) {
  transition: opacity 0.35s var(--ease);
}
.member--fun:focus .member__photo img:not(.member__fun) {
  opacity: 0;
}
/* the LinkedIn link under the circle, small and quiet */
.member__link {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: var(--t-body3);
  color: var(--mute);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.member__link:focus-visible {
  color: var(--ink);
}
.member:focus .member__name {
  opacity: 1;
  transform: none;
  transition-delay: 0.05s;
}
@media (hover: hover) and (pointer: fine) {
  .member:hover .member__photo {
    transform: scale(1.06);
  }
  .member:hover .member__photo::after {
    opacity: 1;
  }
  .member:hover .member__fun.is-on {
    opacity: 1;
  }
  .member--fun:hover .member__photo img:not(.member__fun) {
    opacity: 0;
  }
  .member__link:hover {
    color: var(--ink);
  }
  .member:hover .member__name {
    opacity: 1;
    transform: none;
    transition-delay: 0.05s;
  }
}
/* the name under the circle shows on a touch screen only */
.member__caption {
  display: none;
}
/* A touch screen has no hover. The name shows under each circle, and a tap shows the other photo (TeamCycle). The
   circle does not grow, and a tap that focuses the member changes nothing else. */
@media (hover: none) and (pointer: coarse) {
  .member {
    -webkit-tap-highlight-color: transparent;
  }
  .member:focus .member__photo {
    transform: none;
  }
  .member:focus .member__photo::after,
  .member:focus .member__fun.is-on {
    opacity: 0;
  }
  .member--fun:focus .member__photo img:not(.member__fun) {
    opacity: 1;
  }
  .member--fun:active .member__photo {
    transform: scale(0.98);
    transition-duration: 0.15s;
  }
  .member__name {
    display: none;
  }
  .member__caption {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: var(--t-body3);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
  }
  .member.is-fun .member__fun.is-on {
    opacity: 1;
  }
  .member--fun.is-fun .member__photo img:not(.member__fun) {
    opacity: 0;
  }
  /* the link keeps its small look and gets a 44 px tap area */
  .member__link {
    width: fit-content;
    margin: 0 auto -11px;
    padding: 12px 8px 13px;
  }
  .member__link:active {
    color: var(--ink);
  }
}

@media (max-width: 1100px) {
  .team-grid {
    grid-template-columns: repeat(4, minmax(0, 144px));
  }
  .watch__head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}
@media (max-width: 720px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
    justify-content: stretch;
  }
}

/* story chapter titles stay on one line inside the card */
.story__ch h3 {
  font-size: clamp(26px, 1.9vw, 36px);
}

/* page titles on phones: short titles fit on one line, so no word sits alone */
@media (max-width: 720px) {
  .site-main .about__title,
  .site-main .blog-index__title,
  .site-main .post__title,
  .site-main .members__title {
    font-size: clamp(26px, 7.4vw, 40px);
  }
  .site-main .post__body h2 {
    font-size: 24px;
  }
  .site-main .post__body h3 {
    font-size: 20px;
  }
}

/* members area: a welcome band with the ask box, then the sandbox, docs and briefings */
.members {
  padding-top: calc(var(--header) + clamp(24px, 3vw, 48px));
}
.welcome {
  background: var(--stone);
  border-radius: var(--r);
  padding: clamp(40px, 6vw, 112px) var(--pad);
  text-align: center;
}
.welcome__hi {
  font-size: var(--t-body3);
  font-weight: 500;
  color: var(--ink-2);
}
.welcome__title {
  margin-top: 12px;
  font-size: var(--t-h1);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.welcome__ask {
  margin: clamp(28px, 3vw, 44px) auto 0;
  width: min(760px, 100%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--field);
  border-radius: var(--r-btn);
  padding: 8px 8px 8px 24px;
  box-shadow: 0 20px 60px rgba(28, 27, 29, 0.08);
}
.welcome__ask .icon {
  width: 20px;
  height: 20px;
  color: var(--mute);
}
.welcome__ask input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font: inherit;
  font-size: var(--t-body1);
  color: var(--ink);
  background: transparent;
}
.welcome__ask .btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.welcome__try {
  margin: 16px auto 0;
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  text-align: left;
}
.welcome__try button {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--raise) 55%, transparent);
  font-size: var(--t-body3);
  line-height: 1.4;
  color: var(--ink);
  transition: background 0.3s;
}
.welcome__try button span {
  font-size: 12px;
  color: var(--mute);
}
@media (hover: hover) and (pointer: fine) {
  .welcome__try button:hover {
    background: var(--raise);
  }
}
.welcome__note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--mute);
}

.members__grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.mpanel {
  background: var(--stone);
  border-radius: var(--r);
  padding: var(--pad);
}
.mpanel h2 {
  font-size: var(--t-h3);
  line-height: 1.15;
}
.mpanel .icon {
  width: 32px;
  height: 32px;
}
.mpanel--sandbox {
  grid-column: 1 / -1;
  padding: 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  overflow: hidden;
}
.mpanel__media {
  min-height: 360px;
  /* the same near black in both modes: it sits behind a dark video or screen */
  background: #0d0e10;
}
.mpanel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 40%;
}
.mpanel__body {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.mpanel__body h2 {
  margin-top: 24px;
}
.mpanel__body p {
  margin: 12px 0 28px;
  font-size: var(--t-body2);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 36ch;
}
.mpanel__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.mlist {
  list-style: none;
}
.mlist a {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--stone-2);
}
.mlist b {
  font-weight: 500;
  font-size: var(--t-body2);
}
.mlist span {
  grid-row: 2;
  font-size: var(--t-body3);
  color: var(--mute);
  margin-top: 2px;
}
.mlist .icon {
  grid-row: 1 / 3;
  grid-column: 2;
  width: 18px;
  height: 18px;
  color: var(--mute);
  transition:
    transform 0.3s var(--ease),
    color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .mlist a:hover .icon {
    transform: translateX(4px);
    color: var(--ink);
  }
}
.mpanel--talk {
  grid-column: 1 / -1;
  background: var(--slate);
  color: var(--cream);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 48px;
  align-items: center;
}
.mpanel--talk p {
  grid-row: 2;
  font-size: var(--t-body2);
  line-height: 1.5;
  opacity: 0.8;
  max-width: 52ch;
}
.mpanel--talk .btn {
  grid-row: 1 / 3;
  grid-column: 2;
  color: var(--on-cream);
}

@media (max-width: 1100px) {
  .members__grid,
  .mpanel--sandbox {
    grid-template-columns: 1fr;
  }
  .mpanel__media {
    min-height: 240px;
  }
}
@media (max-width: 720px) {
  .site-main .welcome__title {
    font-size: clamp(26px, 7.4vw, 40px);
  }
  .welcome__ask {
    padding-left: 16px;
  }
  .welcome__ask input {
    font-size: 16px;
  }
  .welcome__try {
    grid-template-columns: 1fr;
  }
  .mpanel--talk {
    grid-template-columns: 1fr;
  }
  .mpanel--talk .btn {
    grid-row: auto;
    grid-column: auto;
    justify-self: start;
    margin-top: 16px;
  }
}

/* hero: the headline takes about 70%, the one-liner and both buttons stacked on the right */
.hero__top {
  display: grid;
  grid-template-columns: 7fr 3fr;
  align-items: end;
  gap: clamp(32px, 4vw, 80px);
}
.hero .hero__title {
  max-width: 18ch;
  font-size: clamp(40px, 4.4vw, 80px);
}
.hero__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding-bottom: 0.4em;
}
.hero .hero__sub {
  margin: 0;
  padding: 0;
  max-width: 30ch;
  font-size: clamp(18px, 1.35vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.drift > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1100px) {
  .hero__top {
    grid-template-columns: 1fr;
  }
  .hero .hero__sub {
    max-width: 46ch;
  }
}
@media (max-width: 720px) {
  .hero .hero__title {
    font-size: clamp(30px, 8.6vw, 40px);
  }
}

/* the systems your data lives in: a slim column of logos drifting past in two lanes, under the button */
.split > * {
  min-width: 0;
}
.sources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 26ch;
  height: clamp(300px, 26vw, 400px);
  margin-top: 8px;
  overflow: hidden;
  font-size: var(--fs-lead);
  -webkit-mask: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
.sources__lane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: lane var(--lane, 40s) linear infinite;
}
.sources__lane--down {
  animation-direction: reverse;
}
/* a mouse over the lanes pauses them; a tap on a touch screen does not */
@media (hover: hover) and (pointer: fine) {
  .sources:hover .sources__lane {
    animation-play-state: paused;
  }
}
@keyframes lane {
  to {
    transform: translateY(calc(-50% - 6px));
  }
}
.sources__tile {
  flex: none;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 18px;
  background: var(--tile);
  /* the ring sits inside the tile, so the edge of the lanes does not cut it off */
  box-shadow: inset 0 0 0 1px var(--stone);
  display: grid;
  place-items: center;
  /* the short name of a standard is sized to the tile */
  container-type: inline-size;
  transition:
    filter 0.2s linear,
    opacity 0.2s linear;
}
/* the whole list shows only in a sideways lane */
.sources__tile--row {
  display: none;
}
/* --fit (set in SOURCES) makes a heavy or a wide mark the same optical size as the others */
.sources__tile img {
  width: calc(46% * var(--fit, 1));
  height: calc(46% * var(--fit, 1));
  object-fit: contain;
  filter: var(--tile-logo);
}
/* a standard with no free logo shows its short name, set as a wordmark */
.sources__mark {
  font-size: 19cqi;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* the COG logo is near black, so Dusk lifts it; --dark-logo comes with the Dusk tokens */
.sources__tile img[src$='cog.png'] {
  filter: var(--dark-logo, none);
}
/* the AWS and Azure icons have their own full colours, so the Dusk lift for one-colour logos does not apply */
.sources__tile img[src$='amazons3.svg'],
.sources__tile img[src$='azuresqldatabase.svg'],
.sources__tile img[src$='azurestorage.svg'] {
  filter: none;
}
/* a plain icon is lighter than the text, so it weighs about the same as a brand logo */
.sources__tile .icon {
  width: 46%;
  height: 46%;
  color: var(--mute);
}
/* at 1100 px or less (each iPad in portrait) the lanes run sideways: three rows of small tiles, as wide as the column */
@media (max-width: 1100px) {
  .sources {
    display: flex;
    height: auto;
    width: 100%;
    max-width: none;
    flex-direction: column;
    -webkit-mask: linear-gradient(
      90deg,
      transparent,
      #000 12%,
      #000 88%,
      transparent
    );
    mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .sources__lane {
    flex-direction: row;
    width: max-content;
    height: 72px;
    animation-name: lane-x;
    /* a sideways lane moves the whole list, so it takes longer and keeps a calm speed */
    animation-duration: calc(var(--lane, 40s) * 2);
  }
  .sources__tile--row {
    display: grid;
  }
  .sources__tile--col {
    display: none;
  }
  .sources__tile {
    width: 72px;
    height: 72px;
    aspect-ratio: auto;
    border-radius: 16px;
  }
  @keyframes lane-x {
    to {
      transform: translateX(calc(-50% - 6px));
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sources__lane {
    animation: none;
  }
}

/* how it works fills the screen: edge to edge, full height, card on the left, illustration on the right */
.story__stage.story__stage--ill {
  height: 100vh;
  min-height: 640px;
  border-radius: 0;
}

/* next step: the pitch on the left, the demo request form on the right */
.next__or {
  font-size: var(--t-body2);
  color: var(--ink-2);
}
.next__or a {
  color: var(--ink);
  border-bottom: 1px solid currentColor;
}
.next__form {
  border-radius: var(--r);
  padding: var(--pad);
  box-shadow: inset 0 0 0 1px var(--stone-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dform {
  display: grid;
  gap: 14px;
}
.dform label {
  display: grid;
  gap: 6px;
  font-size: var(--t-body3);
  font-weight: 500;
}
.dform input,
.dform textarea {
  /* a focused field stays clear of the fixed header, also with the keyboard up */
  scroll-margin-top: calc(var(--header) + 24px);
  scroll-margin-bottom: 24px;
  width: 100%;
  border: 1px solid var(--stone-2);
  border-radius: 12px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  background: var(--field);
}
.dform input {
  height: 50px;
}
.dform textarea {
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.4;
}
.dform input:focus,
.dform textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.dform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dform .btn {
  justify-self: start;
  margin-top: 4px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.dform__error {
  font-size: 14px;
  color: var(--warn);
}
.dform--done h3 {
  font-size: var(--t-h3);
  line-height: 1.15;
}
.dform--done p {
  margin-top: 12px;
  font-size: var(--t-body2);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 40ch;
}

/* the demo time picker after a sent request (DemoPicker.tsx): days, then times, then one button */
.dform--done a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dpick {
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-margin-top: calc(var(--header) + 8px);
}
@media (prefers-reduced-motion: no-preference) {
  .dpick {
    animation: dpick-in 0.45s var(--ease) both;
  }
}
@keyframes dpick-in {
  from {
    opacity: 0;
  }
}
.dpick h3 {
  font-size: var(--t-h3);
  line-height: 1.15;
  outline: none;
}
.dpick p {
  font-size: var(--t-body2);
  line-height: 1.5;
  color: var(--ink-2);
}
.dpick__body {
  margin-top: -4px;
}
.dpick fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.dpick input[type='radio'] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.dpick__days {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 6px;
}
.dpick__row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 3px;
  scrollbar-width: none;
  padding: 3px;
}
.dpick__row::-webkit-scrollbar {
  display: none;
}
.dpick__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.dpick__arrow:disabled {
  color: var(--ghost);
  cursor: default;
}
/* all the days fit, so the row needs no arrows */
.dpick__days--fits {
  grid-template-columns: 1fr;
}
.dpick__days--fits .dpick__arrow {
  display: none;
}
/* the row fades at an edge with more days behind it; the mask uses only the alpha of the gradient */
.dpick__row[data-more='end'] {
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.dpick__row[data-more='start'] {
  mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
}
.dpick__row[data-more='both'] {
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 40px,
    #000 calc(100% - 40px),
    transparent
  );
}
.dpick__day {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.dpick__day span,
.dpick__time span {
  display: grid;
  place-items: center;
  border: 1px solid var(--stone-2);
  background: var(--field);
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.dpick__day span {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  align-content: center;
  gap: 2px;
}
.dpick__day small {
  font-size: var(--t-caption);
  font-weight: 500;
  color: var(--mute);
}
.dpick__day b {
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
}
.dpick__time {
  position: relative;
}
.dpick__time span {
  height: 44px;
  border-radius: 12px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.dpick input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
.dpick input:checked + span small {
  color: var(--on-ink-mute);
}
.dpick input:focus-visible + span,
.dpick__arrow:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .dpick input:not(:checked) + span:hover {
    border-color: var(--ink);
  }
}
.dpick__legend {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  margin-bottom: 8px;
  font-size: var(--t-body3);
  font-weight: 500;
}
.dpick__zone {
  color: var(--mute);
  font-weight: 400;
  text-align: right;
}
/* room for a full day of 16 times in 4 rows, so a change of day never moves the page */
.dpick__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 44px;
  align-content: start;
  gap: 8px;
  min-height: calc(4 * 44px + 3 * 8px);
}
.dpick .dpick__note {
  font-size: var(--t-body3);
}
.dpick__confirm {
  align-self: flex-start;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.dpick__confirm:disabled {
  opacity: 0.4;
  cursor: default;
}
/* the confirmation starts at the top, level with the text in the left column */
.dpick--done {
  gap: 10px;
  justify-content: flex-start;
}
.dpick--done h3 {
  margin-bottom: 4px;
}
.dpick .dpick__when {
  color: var(--ink);
  font-weight: 500;
}
/* a button that looks like a link; it holds the address of the manage page in code, not in the page */
.dpick__manage {
  align-self: flex-start;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--t-body2);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.dpick__manage:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* the manage page of a booked demo (DemoManage.tsx): plain type, two buttons, then the picker below a line */
.dmanage-page {
  padding-top: calc(var(--header) + clamp(48px, 7vw, 120px));
  padding-bottom: clamp(64px, 8vw, 140px);
}
.dmanage {
  max-width: 640px;
}
.dmanage__label {
  font-size: var(--t-body3);
  font-weight: 500;
  color: var(--mute);
}
.dmanage__title {
  margin-top: 12px;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.dmanage__body {
  margin-top: 16px;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink-2);
}
.dmanage__body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dmanage__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.dmanage__actions button.btn {
  cursor: pointer;
  font-family: inherit;
}
.dmanage__actions button.btn--ink {
  border: 0;
}
.dmanage__actions button.btn--line {
  background: none;
  color: var(--ink);
}
.dmanage__actions button.btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.dmanage__picker {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--stone-2);
}

/* window: a light frame with a title bar and a white body, like a piece of the product */
.win {
  background: var(--win);
  border-radius: 22px;
  padding: 5px;
  box-shadow: 0 30px 70px -20px rgba(10, 9, 11, 0.55);
}
.win__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mute);
}
.win__bar img {
  width: 15px;
  height: 15px;
  filter: var(--mono);
}
.win__body {
  background: var(--raise);
  border-radius: 17px;
  padding: clamp(18px, 1.8vw, 28px);
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--mute) 35%,
    var(--ink) 50%,
    var(--mute) 65%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shimmer {
    animation: none;
  }
}

/* hero: headline row, then the product in a big browser window that starts low and runs past the bottom of the
   screen, so the first view shows its top and the rest comes up as you scroll */
.hero {
  padding-top: calc(var(--header) + clamp(0px, 1.5vh, 32px));
  padding-bottom: 0;
}
.hero .hero__top {
  padding-bottom: 0;
}
/* the whole window shows, with its bottom edge and space under it. The height and overflow undo the fixed media
   box in site.css */
.hero__media {
  --bw: min(100vw - 2 * var(--gut), 1680px);
  height: auto;
  overflow: visible;
  background: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0 var(--gut) clamp(64px, 10vh, 140px);
  margin-top: clamp(64px, 13vh, 180px);
}
.browser {
  width: var(--bw);
  flex: none;
  display: flex;
  flex-direction: column;
  transform-origin: 50% 0;
  will-change: transform;
  border-radius: 18px;
  padding: 0 7px 7px;
  background: color-mix(in srgb, var(--raise) 42%, transparent);
  border: 1px solid color-mix(in srgb, var(--raise) 75%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--raise) 60%, transparent) inset,
    0 50px 110px -40px rgba(28, 27, 29, 0.4),
    0 14px 34px -14px rgba(28, 27, 29, 0.2);
}
.browser__bar {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  flex: none;
}
.browser__lights {
  display: flex;
  gap: 8px;
}
.browser__lights i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
.browser__lights i:nth-child(2) {
  background: #febc2e;
}
.browser__lights i:nth-child(3) {
  background: #28c840;
}
.browser__url {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 18px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--raise) 55%, transparent);
  font-size: 13px;
  color: var(--ink-2);
  min-width: min(360px, 40%);
  justify-content: center;
}
.browser__url .icon {
  width: 12px;
  height: 12px;
  color: var(--mute);
}
.browser__screen {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1600 / 686;
  /* the same near black in both modes: it sits behind a dark video or screen */
  background: #0d0e10;
}
.browser__screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the headline fills its 7fr column in two lines. On shorter screens it shrinks with the height. The column stops
   growing at the container width, so the size stops at 104px. A larger size breaks the headline into three lines. */
.hero .hero__title {
  max-width: none;
  font-size: clamp(40px, min(6vw, 9.4vh), 104px);
}
.hero .hero__sub {
  font-size: clamp(16px, min(1.35vw, 2.3vh), 24px);
}
.hero__side {
  gap: clamp(16px, 2.6vh, 28px);
}

/* the mascot's one-liner under the problem text */
.quip {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(36px, 4vw, 64px);
}
.quip img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  transition: transform 0.5s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .quip:hover img {
    transform: rotate(-8deg) scale(1.06);
  }
}
.quip blockquote {
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.quip span {
  display: block;
  margin-top: 6px;
  font-size: var(--t-body3);
  color: var(--mute);
}

/* live questions in the closing panel: each shimmers while answered, then lands */
.next__text .asks {
  width: 100%;
  margin-top: clamp(28px, 3vw, 44px);
}
.asks__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mute);
}
.asks__head img {
  width: 15px;
  height: 15px;
  filter: var(--mono);
}
.asks__list {
  list-style: none;
  padding-top: 4px;
  padding-bottom: 4px;
}
.asks__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--stone-2);
  animation: ask-in 0.5s var(--ease) both;
}
.asks__q {
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink);
}
.asks__a {
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
}
.asks__row:nth-child(2) {
  opacity: 0.75;
}
.asks__row:nth-child(3) {
  opacity: 0.5;
}
@keyframes ask-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.asks__row:not(:first-child) {
  animation: none;
}

/* behind the story: a flight through the knowledge graph, drawn on a canvas that fills the stage */
/* the chapter text and its callouts share one soft, frosted panel, top left, rounded like the rest of the site */
.story__stage--ill .story__card {
  z-index: 1;
  left: var(--gut);
  top: calc(var(--header) + clamp(16px, 4vh, 48px));
  width: clamp(340px, 29%, 440px);
  padding: clamp(24px, 2.2vw, 36px);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--raise) 72%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--raise) 90%, transparent),
    0 30px 70px -36px rgba(28, 27, 29, 0.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
/* on touch the panel is solid: a frosted panel over the moving scene costs too much on an iPad */
@media (hover: none) and (pointer: coarse) {
  .story__stage--ill .story__card {
    background: var(--raise);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* a jump across the story fades the page to its ground and back (see fadeJump); the header stays above it */
.jump-veil {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: var(--paper);
  pointer-events: none;
  opacity: 0;
}
.story__stage--ill .story__bars {
  gap: 8px;
}
.story__stage--ill .story__bars span {
  height: 4px;
  border-radius: 999px;
  background: var(--stone-2);
}
.story__stage--ill .story__bars b {
  border-radius: 999px;
}
.story__stage--ill .story__bars b {
  background: var(--ink);
}
.story__stage--ill .story__n {
  color: var(--mute);
}
.story__stage--ill .story__ch p:last-child {
  color: var(--ink-2);
}
/* the three chapters share one grid cell, so the slot takes the height of the longest chapter at each width */
.story__stage--ill .story__slot {
  display: grid;
  height: auto;
  min-height: 168px;
}
.story__stage--ill .story__ch {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
}
.story__stage--ill .story__ch h3 {
  font-size: clamp(30px, 2.3vw, 42px);
  line-height: 1.05;
  margin-top: 10px;
}
.story__stage--ill .story__ch p:last-child {
  font-size: var(--fs-lead);
  line-height: 1.4;
  margin-top: 16px;
}

/* anything that sits side by side lines up along its top edge, never its middle or bottom */
.hero__top {
  align-items: start;
}
.hero__side {
  padding-bottom: 0;
  padding-top: 0.5em;
}
.watch__head {
  align-items: start;
}
.watch__side {
  align-items: flex-start;
  padding-top: 0.4em;
}
.next__text,
.next__form {
  justify-content: flex-start;
}

/* the scene: records from each system in CSS 3D, with the words in the left column under the chapter text */
.sg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sf {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1000px;
  perspective-origin: 62% 54%;
  /* the records fade out behind the chapter text, so the copy always reads cleanly */
  -webkit-mask: linear-gradient(
    90deg,
    transparent 0,
    transparent 25%,
    #000 36%
  );
  mask: linear-gradient(90deg, transparent 0, transparent 25%, #000 36%);
}
.sf__world {
  position: absolute;
  left: 62%;
  top: 54%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.fr {
  position: absolute;
  left: 0;
  top: 0;
  width: 380px;
  display: grid;
  gap: 8px;
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: var(--raise);
  box-shadow:
    inset 0 0 0 1px var(--stone-2),
    0 24px 50px -28px rgba(28, 27, 29, 0.28);
  color: var(--ink);
  font-size: 19px;
  line-height: 1.35;
  backface-visibility: hidden;
  transition:
    box-shadow 0.4s,
    background 0.4s;
}
.fr b {
  font-size: 22px;
  font-weight: 500;
}
.fr__src {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 7px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--stone);
  font-size: 15px;
  color: var(--mute);
}
.fr__src img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
/* Kafka's logo is near black, so Dusk lifts it */
.fr__src img[src$='apachekafka.svg'] {
  filter: var(--dark-logo);
}
.fr__src .icon {
  width: 18px;
  height: 18px;
  color: var(--mute);
}
.fr__mono {
  font-family:
    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.fr__mute {
  color: var(--mute);
}
.fr__row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 8px;
  row-gap: 3px;
  align-items: baseline;
}
.fr__row .fr__mono:first-child {
  grid-column: 1;
  grid-row: 1;
}
.fr__row .fr__num {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  font-size: 19px;
  color: var(--ink);
  transition: color 0.4s;
}
.fr__row b {
  grid-column: 1;
  grid-row: 2;
  white-space: nowrap;
}
.fr__row .fr__mono:last-child {
  grid-column: 2;
  grid-row: 2;
  text-align: right;
}
.fr__kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.fr__spark {
  width: 100%;
  height: 40px;
}
.fr__spark polyline {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.fr__img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}
.fr.is-hit {
  box-shadow:
    inset 0 0 0 2px var(--ink),
    0 24px 50px -28px rgba(28, 27, 29, 0.35);
}
/* the orders at risk turn ink, like our primary buttons */
.fr.is-risk {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: 0 30px 60px -26px rgba(28, 27, 29, 0.55);
}
.fr.is-risk .fr__num,
.fr.is-risk b {
  color: var(--on-ink);
}
.fr.is-risk .fr__mute,
.fr.is-risk .fr__src,
.fr.is-risk .fr__src .icon {
  color: var(--on-ink-mute);
}
.fr.is-risk .fr__src {
  border-bottom-color: color-mix(in srgb, var(--on-ink) 14%, transparent);
}
.sf__callouts {
  display: none;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--stone-2);
}
.sf__callouts.is-on {
  display: grid;
}
.sf__rules,
.sf__qa {
  grid-area: 1 / 1;
  display: grid;
  gap: 20px;
  align-content: start;
}
.sf__rule,
.sf__question,
.sf__answer {
  opacity: 0;
}
.sf__callouts span {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mute);
}
.sf__callouts p {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}
.sf__answer p {
  font-weight: 400;
  color: var(--ink-2);
}

/* 404 and error pages */
.lost {
  padding-top: calc(var(--header) + clamp(64px, 10vw, 160px));
  padding-bottom: clamp(64px, 8vw, 140px);
}
.lost__code {
  font-size: var(--t-body3);
  font-weight: 500;
  color: var(--mute);
}
.lost__title {
  margin-top: 12px;
  font-size: var(--t-h1);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.lost__body {
  margin-top: 20px;
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink-2);
}
.lost__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.lost__actions button.btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

/* privacy and terms */
.legal {
  padding-top: calc(var(--header) + clamp(48px, 6vw, 112px));
  padding-bottom: clamp(48px, 6vw, 112px);
}
.legal__meta {
  font-size: var(--t-body3);
  color: var(--mute);
}
.legal__title {
  margin-top: 12px;
  font-size: var(--t-h1);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.legal__body {
  max-width: 720px;
  margin-top: clamp(32px, 4vw, 56px);
  font-size: var(--t-body1);
  line-height: 1.55;
  color: var(--ink-2);
}
.legal__body h2 {
  margin-top: 40px;
  font-size: var(--t-h4);
  line-height: 1.2;
  color: var(--ink);
}
.legal__body p {
  margin-top: 14px;
}
.legal__body a {
  color: var(--ink);
  border-bottom: 1px solid currentColor;
}

/* Pricing: four plans as columns split by thin rules, then the comparison, Team usage and questions as plain rows */
.pricing {
  padding-top: calc(var(--header) + clamp(56px, 6vw, 120px));
  padding-bottom: clamp(48px, 6vw, 112px);
}
.pricing__title {
  font-size: var(--t-h1);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 16ch;
}
.pricing__draft {
  margin-top: 16px;
  font-size: 15px;
  color: var(--mute);
}
.plans {
  list-style: none;
  margin-top: clamp(48px, 5vw, 88px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
}
.plan {
  display: grid;
  grid-row: span 7;
  grid-template-rows: subgrid;
  row-gap: 0;
  justify-items: start;
  align-content: start;
  padding: 28px clamp(16px, 1.8vw, 32px) 8px;
  border-left: 1px solid var(--stone-2);
}
.plan:first-child {
  padding-left: 0;
  border-left: 0;
}
.plan__name {
  font-size: var(--t-h4);
  line-height: 1.2;
}
.plan__price {
  margin-top: 20px;
  font-size: clamp(40px, 3.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.plan__unit {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--mute);
}
.plan__who {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-2);
}
.plan__cta {
  margin-top: 24px;
  width: 100%;
}
.plan__lead {
  margin-top: 28px;
  font-size: 14px;
  font-weight: 500;
}
.plan__list {
  list-style: none;
  margin-top: 8px;
  width: 100%;
}
.plan__list li {
  padding: 10px 0;
  border-top: 1px solid var(--stone);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-2);
}
.pricing__block {
  margin-top: clamp(80px, 9vw, 160px);
}
.pricing__h2 {
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.pricing__split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}

.compare {
  margin-top: clamp(28px, 3vw, 48px);
  font-size: 15px;
  line-height: 1.4;
}
.compare__head,
.compare__row {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}
.compare__head {
  position: sticky;
  top: calc(var(--header) + var(--announce, 0px));
  z-index: 2;
  background: var(--paper);
  padding: 14px 0;
  border-bottom: 1px solid var(--ink);
  font-weight: 500;
  font-size: 17px;
}
.compare__label {
  padding: 32px 0 10px;
  font-size: 14px;
  color: var(--mute);
}
.compare__row {
  padding: 12px 0;
  border-top: 1px solid var(--stone);
  color: var(--ink-2);
}
.compare__row > span:first-child {
  color: var(--ink);
}
.price-yes {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  background: var(--ink);
  -webkit-mask: url(/assets/icons/check.svg) center / contain no-repeat;
  mask: url(/assets/icons/check.svg) center / contain no-repeat;
}
.price-no {
  color: var(--ghost, var(--mute));
}

.usage {
  font-size: 15px;
  line-height: 1.4;
}
.usage__row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--stone);
  color: var(--ink-2);
}
.usage__row > span:first-child {
  color: var(--ink);
}
.usage__row--head {
  border-top: 0;
  padding-top: 0;
  font-size: 14px;
  color: var(--mute);
}

.faq details {
  border-top: 1px solid var(--stone-2);
}
.faq details:last-child {
  border-bottom: 1px solid var(--stone-2);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-size: var(--fs-lead);
  line-height: 1.35;
  font-weight: 500;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  flex: none;
  font-weight: 400;
  color: var(--mute);
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq p {
  padding: 0 0 22px;
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
}

@media (max-width: 1100px) {
  .plans {
    grid-template-columns: repeat(2, 1fr);
  }
  .plan:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .plan:nth-child(n + 3) {
    border-top: 1px solid var(--stone-2);
  }
}
@media (max-width: 900px) {
  .pricing__split {
    grid-template-columns: 1fr;
  }
}

/* hero screenshots: stacked in the browser window, the current one fades in over the others */
.browser__screen > img,
.screens {
  display: block;
  width: 100%;
  height: 100%;
}
.screens {
  position: relative;
}
.screens img,
.browser__screen > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.screens img {
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.screens img.is-on {
  opacity: 1;
}
/* each screenshot has a twin from the app's dark mode: the mode picks one, as for the logo */
.browser__screen > img.for-light {
  display: var(--show-light);
}
.browser__screen > img.for-dusk {
  display: var(--show-dusk);
}
.browser__screen {
  position: relative;
}

/* touch screens: a short press state on the members links and the try buttons */
@media (hover: none) and (pointer: coarse) {
  .welcome__try button,
  .mlist a {
    -webkit-tap-highlight-color: transparent;
  }
  .welcome__try button:active {
    background: var(--raise);
  }
  .mlist a:active .icon {
    color: var(--ink);
  }
}