/* Listo, the website. Paper, ink and type come from the product (app.css).
   Three sizes of type do the hierarchy; pictures and four colours do the excitement. */

.site {
  --pad: clamp(20px, 4vw, 56px);
  --h1: clamp(34px, 4.5vw, 66px);
  --h2: clamp(27px, 3vw, 44px);
  --h3: clamp(19px, 1.5vw, 22px);
  --body: 16.5px;
  --r-l: 14px;
  --r-m: 10px;
  --r-s: 5px;
}
/* Every rounded corner on the site is a squircle where the browser can draw one,
   and an ordinary round corner where it cannot. Circles stay circles. */
@supports (corner-shape: squircle) {
  .site {
    --r-l: 24px;
    --r-m: 17px;
    --r-s: 9px;
  }
  .site *,
  .site *::before,
  .site *::after {
    corner-shape: squircle;
  }
  .site .mark,
  .site .wordmark::after,
  .site .button::before,
  .agent-stack i,
  .steps i,
  .tick svg,
  .slot-ring svg,
  .mock-meta i,
  .mock-next {
    corner-shape: round;
  }
}
.site a {
  text-decoration: none;
}
.wrap {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.site-mast {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  padding-top: 22px;
  color: var(--ink);
  transition: color 0.5s var(--ease);
}
/* Whatever scrolls under the bar blurs out, so the bar stays readable without a ground of its own. */
.site-mast::before {
  content: '';
  position: absolute;
  inset: 0 0 -26px 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(#000 50%, transparent);
  mask-image: linear-gradient(#000 50%, transparent);
  pointer-events: none;
}
.site-mast {
  padding-bottom: 14px;
}
/* The plain pages keep theirs at the top of the page. */
.site:has(main.page) .site-mast {
  position: absolute;
}
.site:has(main.page) .site-mast::before {
  display: none;
}
.site-mast .wordmark::after {
  transition: background 0.5s var(--ease);
}
.site-mast .text-button.quiet {
  color: inherit;
  opacity: 0.66;
  transition: opacity var(--quick) var(--ease), background-size var(--quick) var(--ease);
}
.site-mast .text-button.quiet:hover {
  opacity: 1;
}
.site-mast .button {
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease), background 0.5s var(--ease);
}
.site-mast.is-light {
  color: #fff;
}
.site-mast.is-light .wordmark::after {
  background: var(--lime);
}
.site-mast.is-light .button {
  --fill: var(--lime);
  --fill-ink: #0a0a0a;
  background: #fff;
  border-color: #fff;
  color: #0a0a0a;
}
.mast-row,
.foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
/* The sheet under the bar. One sheet for all the groups; they cross-fade inside it. */
.mast-row {
  position: relative;
  z-index: 2;
}
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  color: inherit;
}
.nav-trigger::after {
  content: '';
  width: 5px;
  height: 5px;
  border: solid currentColor;
  border-width: 0 1.2px 1.2px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--quick) var(--ease);
}
.nav-trigger[aria-expanded='true'] {
  opacity: 1 !important;
}
.nav-trigger[aria-expanded='true']::after {
  transform: translateY(1px) rotate(225deg);
}
.nav-panel {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: calc(var(--h, 0px));
  overflow: hidden;
  background: var(--paper);
  border-radius: 0 0 var(--r-l) var(--r-l);
  transition: height 0.6s var(--ease), visibility 0s linear 0.6s;
  visibility: hidden;
}
.site-mast.is-open .nav-panel {
  visibility: visible;
  transition: height 0.6s var(--ease);
}
.nav-sizer {
  padding: 92px 0 clamp(28px, 3.4vw, 48px);
}
.nav-groups {
  display: grid;
}
.nav-group {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
  gap: 24px clamp(24px, 4vw, 64px);
  align-items: start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s;
}
.nav-group.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s var(--ease) 0.12s, transform 0.5s var(--ease) 0.12s;
}
.nav-title {
  margin: 0;
  font-weight: 500;
  font-size: var(--h2);
  line-height: 1.04;
  letter-spacing: -0.011em;
}
.nav-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px clamp(12px, 2vw, 28px);
}
.nav-links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 12px;
  padding: 11px 14px 12px;
  margin: 0 -14px;
  border-radius: var(--r-m);
  transition: background var(--quick) var(--ease);
}
.nav-links.is-marks a {
  grid-template-columns: 22px minmax(0, 1fr);
}
.nav-links a:hover {
  background: var(--wash);
}
.nav-links i {
  grid-row: 1 / 3;
  align-self: center;
  display: inline-flex;
  font-size: 17px;
}
.nav-links.is-marks a:not(:has(i)) b,
.nav-links.is-marks a:not(:has(i)) span {
  grid-column: 2;
}
.nav-links b {
  font-weight: 500;
  font-size: 16.5px;
  letter-spacing: 0;
}
.nav-links span {
  font-size: 14px;
  color: var(--ink-2);
}
.nav-card {
  display: grid;
  gap: 12px;
}
.nav-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-m);
  transition: transform 0.9s var(--ease);
}
.nav-card:hover img {
  transform: scale(1.03);
}
.nav-card span {
  display: grid;
  gap: 2px;
  font-size: 14px;
  color: var(--ink-2);
}
.nav-card b {
  font-weight: 500;
  font-size: 15.5px;
  color: var(--ink);
}
.nav-foot,
.nav-burger {
  display: none;
}
/* While a menu is open the bar reads as ink on paper, whatever is underneath. */
.site-mast.is-open,
.site-mast.is-open.is-light {
  color: var(--ink);
}
.site-mast.is-open::before {
  opacity: 0;
}
.site-mast.is-open.is-light .wordmark::after {
  background: var(--brand);
}
.site-mast.is-open.is-light .button {
  --fill: var(--brand);
  --fill-ink: #fff;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.nav-burger {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  width: 38px;
  height: 38px;
  margin-right: -8px;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.nav-burger i {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 50%;
  height: 1.6px;
  background: currentColor;
  transition: transform 0.45s var(--ease);
}
.nav-burger i:first-child {
  transform: translateY(-4px);
}
.nav-burger i:last-child {
  transform: translateY(4px);
}
.nav-burger[aria-expanded='true'] i:first-child {
  transform: rotate(45deg);
}
.nav-burger[aria-expanded='true'] i:last-child {
  transform: rotate(-45deg);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 28px);
}
.site-nav .text-button,
.foot-nav .text-button {
  font-size: 14.5px;
}

/* ───────── Hero: the world of posts ───────── */

.hero {
  height: 300vh;
  position: relative;
}
.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
}
#world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.4s var(--ease) 0.3s;
}
.is-ready #world {
  opacity: 1;
}
.hero-copy {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  align-self: center;
  will-change: transform, opacity;
}
.hero-copy > * {
  max-width: min(34rem, 46%);
}
.hero-copy > .hero-line {
  /* Wide enough for two lines, "Agentic posting for / the content you make.", clear of the sphere. */
  max-width: 10.4em;
}
.hero-line {
  margin: 0;
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
/* Until the script has split it into words, the headline stays out of sight: shown whole first and
   then taken away to rise, it would blink as each page comes in. If the script never runs, it shows. */
[data-split]:not(.is-split) {
  opacity: 0;
  animation: split-late 0.6s 2.5s forwards;
}
@keyframes split-late {
  to {
    opacity: 1;
  }
}
/* The mask is larger than the word on every side, so no ascender, descender or overhang is cut. */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.2em 0.08em 0.3em;
  margin: -0.2em -0.08em -0.3em;
}
.word > span {
  display: inline-block;
  transform: translateY(150%);
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--w) * 38ms + 80ms);
}
.is-ready .word > span {
  transform: none;
}
.hero-sub {
  margin: 20px 0 0;
  font-size: clamp(16.5px, 1.25vw, 19px);
  line-height: 1.42;
  color: var(--ink-2);
  text-wrap: pretty;
}
.hero-actions,
.claude-actions {
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.hero-sub,
.hero-actions {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease) 0.55s, transform 0.9s var(--ease) 0.55s;
}
.hero-actions {
  transition-delay: 0.65s;
}
.is-ready .hero-sub,
.is-ready .hero-actions,
.closing .hero-actions {
  opacity: 1;
  transform: none;
}
/* Connect your agent: the agents sit in a stack beside the button and step apart on hover,
   while their names slide in before the line underneath. */
.hero-actions {
  align-items: flex-start;
}
.agent-cta {
  display: inline-grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  gap: 11px 10px;
}
.agent-stack {
  display: flex;
  align-items: center;
}
.agent-stack i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--rule);
  display: grid;
  place-items: center;
  margin-left: -11px;
  font-size: 13.5px;
  transition: margin 0.55s var(--ease), transform 0.55s var(--ease);
}
.agent-stack i:first-child {
  margin-left: 0;
}
.agent-stack i:nth-child(2) {
  transition-delay: 40ms;
}
.agent-stack i:nth-child(3) {
  transition-delay: 80ms;
}
.agent-stack i:nth-child(4) {
  transition-delay: 120ms;
}
.agent-line {
  grid-column: 1 / -1;
  display: flex;
  /* No width of its own, so the names sliding in never stretch the button above. */
  width: 0;
  white-space: nowrap;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--ink-2);
}
.agent-names {
  display: block;
  flex: none;
  overflow: hidden;
  width: 0;
  color: var(--ink);
  transition: width 0.75s var(--ease);
}
.agent-names > span {
  display: block;
  width: max-content;
  white-space: pre;
}
.agent-cta.is-open .agent-stack i,
.agent-cta:hover .agent-stack i,
.agent-cta:has(.button:focus-visible) .agent-stack i {
  margin-left: 5px;
}
.agent-cta.is-open .agent-stack i:first-child,
.agent-cta:hover .agent-stack i:first-child,
.agent-cta:has(.button:focus-visible) .agent-stack i:first-child {
  margin-left: 0;
}
.agent-cta.is-open .agent-names,
.agent-cta:hover .agent-names,
.agent-cta:has(.button:focus-visible) .agent-names {
  width: var(--w, auto);
}
/* On a phone nothing around it moves: the button keeps a row of its own, the agents step apart
   inside room that is already theirs, and the whole sentence is simply there, no names sliding in. */
@media (max-width: 560px) {
  .agent-cta {
    flex-basis: 100%;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .agent-cta .button {
    white-space: nowrap;
  }
  .agent-stack {
    width: calc(4 * 30px + 3 * 5px);
  }
  .agent-line {
    display: block;
    width: auto;
    white-space: normal;
  }
  .agent-names,
  .agent-cta.is-open .agent-names,
  .agent-cta:hover .agent-names,
  .agent-cta:has(.button:focus-visible) .agent-names {
    display: inline;
    width: auto;
    overflow: visible;
    transition: none;
  }
  .agent-names > span {
    display: inline;
    width: auto;
    white-space: normal;
  }
}
/* The narrowest phones have no room for them to step apart: they stay stacked. */
@media (max-width: 359px) {
  .agent-stack {
    width: auto;
  }
  .agent-cta .agent-stack i:not(:first-child) {
    margin-left: -11px;
  }
}
.closing .agent-line {
  color: rgba(255, 255, 255, 0.82);
}
.closing .agent-names {
  color: #fff;
}
.closing .agent-stack i {
  background: #fff;
  color: #0a0a0a;
  box-shadow: 0 0 0 1.5px rgba(10, 10, 10, 0.16);
}

/* A button's words roll over, one after the other. */
.roll {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.2em 0.06em 0.3em;
  margin: -0.2em -0.06em -0.3em;
}
.roll > span {
  display: inline-block;
  position: relative;
  transition: transform 0.55s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.roll > span::after {
  content: attr(data-w);
  position: absolute;
  left: 0;
  top: 170%;
}
.button:hover .roll > span,
.button:focus-visible .roll > span {
  transform: translateY(-170%);
}
.pmark {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
  flex: none;
}

/* The line that frames the month: half on its left, half on its right. */
.hero-after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-after span {
  position: absolute;
  width: max-content;
  white-space: nowrap;
  font-size: clamp(12.5px, 1.15vw, 17px);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0;
  will-change: transform, opacity;
}
.frame-a {
  text-align: right;
  opacity: var(--a, 0);
  transform: translateY(calc(-50% + (1 - var(--a, 0)) * 14px));
}
.frame-b {
  opacity: var(--b, 0);
  transform: translateY(calc(-50% + (1 - var(--b, 0)) * 14px));
}
.hero-after.is-stacked span {
  text-align: center;
  font-size: 16px;
}
.hero-after.is-stacked .frame-a {
  transform: translate(-50%, calc(-100% + (1 - var(--a, 0)) * 14px));
}
.hero-after.is-stacked .frame-b {
  transform: translate(-50%, calc((1 - var(--b, 0)) * 14px));
}
.hero-fallback {
  position: absolute;
  inset: 0 0 0 52%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-content: center;
  padding-right: var(--pad);
}
.hero-fallback img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-s);
}

/* ───────── The idea, one picture, its place in the month ───────── */

.scene {
  height: 460vh;
  position: relative;
}
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.scene-copy {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  will-change: transform, opacity;
}
.scene-text {
  margin: 0 auto;
  width: min(17em, 100%);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 84px);
  line-height: 1.06;
  letter-spacing: -0.013em;
}
/* The name, set apart. */
.scene-text .name {
  font-weight: 500;
  color: var(--brand);
  white-space: nowrap;
}
.scene-text sup {
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: top;
  position: relative;
  top: 0.3em;
  margin-left: 0.06em;
}
.wd {
  display: inline-block;
  white-space: nowrap;
}
.ch {
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.ch.on {
  opacity: 1;
}
.ch.caret {
  position: relative;
}
.ch.caret::after {
  content: '';
  position: absolute;
  left: calc(100% + 0.07em);
  top: 0.14em;
  bottom: 0.1em;
  width: 0.07em;
  background: var(--brand);
}
.cal {
  width: min(820px, calc(100% - var(--pad) * 2), calc((100vh - 220px) * 1.4));
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(4px, 0.7vw, 9px);
  opacity: 0;
  will-change: transform, opacity;
}
.cal span {
  aspect-ratio: 4 / 5;
  background: var(--wash);
  border-radius: var(--r-s);
  position: relative;
  overflow: hidden;
  padding: 7px 9px;
  font-size: clamp(10px, 0.95vw, 12.5px);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.cal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: drift 8s ease-in-out infinite alternate;
}
.cal span:nth-child(odd) img {
  animation-duration: 11s;
  animation-direction: alternate-reverse;
}
/* A day that holds a video shows it playing. */
.cal .is-video::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 7%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff 50%, rgba(255, 255, 255, 0.4) 50%);
  background-size: 200% 100%;
  animation: cal-play 7s linear infinite;
}
@keyframes cal-play {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
.scene-pic {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  z-index: 1;
  will-change: left, top, width, height, opacity;
}
.scene-pic img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(var(--zoom, 1));
}
.scene-pic::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(10, 10, 10, 0) 45%, rgba(10, 10, 10, 0.5));
  opacity: var(--shade, 0);
}
.scene-line {
  position: absolute;
  z-index: 2;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(28px, 7vh, 80px);
  margin: 0;
  max-width: 11em;
  color: #fff;
  font-weight: 500;
  font-size: var(--h1);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
  opacity: 0;
  will-change: transform, opacity;
}
/* On a tall screen the month turns: four days across, seven down. */
@media (max-aspect-ratio: 21/20) {
  .cal {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(calc(100% - var(--pad) * 2), calc((100vh - 250px) * 0.445));
  }
  .scene-text {
    font-size: clamp(34px, 10.4vw, 64px);
  }
}
/* Scheduled: an outline closes on the day and a tick is drawn. */
.slot-ring {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  opacity: var(--k, 0);
}
.slot-ring::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid var(--brand);
  border-radius: var(--r-m);
  transform: scale(calc(1.16 - 0.16 * var(--k, 0)));
}
.slot-ring svg,
.tick svg {
  display: block;
  border-radius: 50%;
  background: var(--brand);
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 17;
  stroke-dashoffset: calc(17 * (1 - var(--k, 0)));
}
.slot-ring svg {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 24px;
  height: 24px;
  transform: scale(var(--k, 0));
}
.scene-note {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 5vh, 52px);
  transform: translateX(-50%);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  color: var(--ink-2);
  white-space: nowrap;
  opacity: 0;
}
.scene-note b {
  font-weight: 500;
  color: var(--ink);
}
.tick {
  display: block;
  width: 18px;
  height: 18px;
}
.cal .is-set {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}
.site .mark.is-brand {
  background: var(--brand);
  box-shadow: none;
}

/* ───────── Agents first ───────── */

.agents {
  --band: #0c0c0c;
  --card: #191919;
  --soft: rgba(255, 255, 255, 0.66);
  margin-top: clamp(40px, 6vw, 96px);
  background: var(--band);
  color: #fff;
  padding: clamp(64px, 8vw, 128px) 0;
}
.agents .statement {
  font-size: var(--h1);
  line-height: 1.02;
  letter-spacing: -0.012em;
}
.agents .aside {
  color: var(--soft);
}
.agent-grid {
  margin-top: clamp(32px, 4.4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(10px, 1.4vw, 20px);
  align-items: stretch;
}
.talk,
.connect {
  background: var(--card);
  border-radius: var(--r-l);
  padding: clamp(18px, 2.2vw, 32px);
}
.talk {
  display: grid;
  align-content: start;
  gap: clamp(22px, 2.6vw, 36px);
  min-height: 420px;
}
.talk-tabs {
  justify-self: start;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.talk-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--soft);
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  padding: 7px 14px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: background var(--quick) var(--ease), color var(--quick) var(--ease);
}
.talk-tab [data-mark] {
  display: inline-flex;
}
.talk-tab:hover {
  color: #fff;
}
.talk-tab.is-on {
  background: #fff;
  color: #0a0a0a;
}
.talk-body {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  transition: opacity 0.38s var(--ease), transform 0.38s var(--ease);
}
.talk-body.is-leaving {
  opacity: 0;
  transform: translateY(8px);
}
/* A chat: you on the right in a bubble, the agent on the left. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.bubble {
  margin: 0;
  justify-self: end;
  max-width: min(30em, 82%);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 22px 22px 6px 22px;
  padding: 13px 18px 14px;
  font-size: clamp(15.5px, 1.25vw, 17.5px);
  line-height: 1.4;
  text-wrap: pretty;
}
.reply {
  display: grid;
  gap: 14px;
  justify-items: start;
  max-width: min(34em, 92%);
}
.reply-who {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--soft);
}
.reply-who b {
  font-weight: 500;
}
.reply-who [data-mark] {
  display: inline-flex;
  color: #fff;
  font-size: 15px;
}
.reply-text {
  margin: 4px 0 0;
  font-size: clamp(15.5px, 1.25vw, 17.5px);
  line-height: 1.42;
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.is-done .reply-text {
  opacity: 1;
  transform: none;
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 14.5px;
}
.steps li {
  display: grid;
  grid-template-columns: 18px auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.steps li.is-on {
  opacity: 1;
  transform: none;
}
.steps i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--lime);
  animation: turn 0.9s linear infinite;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  position: relative;
}
.steps i::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2.2px;
  width: 4.5px;
  height: 8px;
  border: solid #0a0a0a;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(42deg) scale(0);
  transition: transform 0.4s var(--ease);
}
.steps li.is-done i {
  animation: none;
  background: var(--lime);
  border-color: var(--lime);
}
.steps li.is-done i::after {
  transform: rotate(42deg) scale(1);
}
.steps em {
  font-style: normal;
  color: var(--soft);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.steps li.is-done em {
  opacity: 1;
}
@keyframes turn {
  to {
    transform: rotate(360deg);
  }
}
.connects {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
}
.connect {
  min-width: 0;
}
.connect h3 {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 500;
  font-size: var(--h3);
  letter-spacing: -0.007em;
}
.connect h3 [data-mark] {
  display: inline-flex;
}
.connect p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--soft);
  text-wrap: pretty;
}
.connect .command {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  border-radius: var(--r-m);
  padding: 7px 7px 7px 13px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: clamp(11.5px, 0.9vw, 13px);
}
.command > span {
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.copy {
  appearance: none;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--lime);
  color: #0a0a0a;
  font: 500 12.5px/1 'Listo Sans', ui-sans-serif, system-ui, sans-serif;
  padding: 7px 11px 8px;
  cursor: pointer;
  transition: opacity 0.2s var(--ease), background var(--quick) var(--ease);
}
.copy:hover {
  background: #fff;
}
.copy.is-swapping {
  opacity: 0;
}

/* ───────── Sections ───────── */

.block {
  margin-top: clamp(88px, 11vw, 168px);
}
.block-head,
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px clamp(32px, 6vw, 96px);
  align-items: end;
}
.split {
  align-items: center;
}
.statement {
  margin: 0;
  font-weight: 500;
  font-size: var(--h2);
  line-height: 1.04;
  letter-spacing: -0.011em;
  text-wrap: balance;
  max-width: 14em;
}
.aside {
  margin: 0;
  font-size: var(--body);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 30em;
  text-wrap: pretty;
}
.split > div > .statement + .aside {
  margin-top: 18px;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--r, 0) * 70ms);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* A piece of the product, shown as it is. */
.shot {
  background: var(--wash);
  border-radius: var(--r-l);
  padding: clamp(20px, 5vw, 76px) clamp(14px, 5vw, 76px) 0;
  max-height: min(84vh, 800px);
  overflow: hidden;
  /* The app runs on past the frame: it fades out towards the bottom. */
  -webkit-mask-image: linear-gradient(#000 calc(100% - clamp(90px, 14vw, 180px)), transparent);
  mask-image: linear-gradient(#000 calc(100% - clamp(90px, 14vw, 180px)), transparent);
}
/* It arrives from below, out of a blur. */
.shot.reveal .window {
  transform: translateY(90px);
  filter: blur(22px);
  opacity: 0.2;
  transition: transform 1.4s var(--ease) 0.1s, filter 1.4s var(--ease) 0.1s, opacity 1s var(--ease) 0.1s;
}
.shot.reveal.is-in .window {
  transform: none;
  filter: none;
  opacity: 1;
}
.block-head + .shot,
.block-head + .trio,
.block-head + .formats,
.block-head + .plans {
  margin-top: clamp(28px, 3.6vw, 52px);
}
.window {
  background: var(--paper);
  border-radius: var(--r-m) var(--r-m) 0 0;
  padding: clamp(14px, 2vw, 28px) clamp(16px, 2.2vw, 32px) 0;
}
.window-bar,
.window-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
}
.window-bar {
  padding-bottom: clamp(14px, 1.6vw, 22px);
}
.window-sub {
  padding-bottom: clamp(18px, 2.2vw, 30px);
}
.window-bar .wordmark {
  font-size: 17px;
}
.window i {
  font-style: normal;
}
.window-tabs,
.seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--wash);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.window-tabs {
  margin-right: auto;
  margin-left: clamp(8px, 2vw, 28px);
}
.window-tabs i,
.seg i {
  padding: 6px 13px 7px;
  border-radius: 999px;
}
.window-tabs .is-on,
.seg .is-on {
  background: var(--paper);
  color: var(--ink);
}
.window-tools {
  display: flex;
  align-items: center;
  gap: 14px;
}
.window-new {
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: 7px 14px 8px;
  font-size: 13.5px;
  font-weight: 500;
}
.window-range {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(17px, 1.6vw, 22px);
  letter-spacing: -0.007em;
}
.window-range b {
  font-weight: 500;
}
.window-step {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--wash);
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  color: var(--ink-2);
  padding-bottom: 2px;
}
.window-meta {
  font-size: 13.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* The schedule inside a window: the product's own rows, without its rules. */
#demo {
  --cols: 92px 52px minmax(220px, 1fr) repeat(4, minmax(96px, 128px));
}
#demo .row.head {
  position: static;
  padding: 0 0 8px;
  border-bottom: 0;
}
#demo .day {
  grid-template-columns: 92px minmax(0, 1fr);
  border-bottom: 0;
}
#demo .day-name {
  position: static;
  padding: 14px 0;
}
#demo .post {
  grid-template-columns: 52px minmax(220px, 1fr) repeat(4, minmax(96px, 128px));
  cursor: default;
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 0;
}
#demo .post:hover {
  background: none;
}
#demo .day-number {
  font-size: 34px;
}
#demo .piece-title {
  font-size: 16.5px;
}

/* Three things, each in its own panel with its drawing. */
.trio {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
}
.trio .tile {
  grid-column: span 2;
}
.trio .tile:nth-child(n + 4) {
  grid-column: span 3;
  --r: 1;
}
.trio .tile:nth-child(n + 4) .iso {
  aspect-ratio: 5 / 2.5;
}
.tile {
  background: var(--wash);
  border-radius: var(--r-l);
  padding: clamp(18px, 2.2vw, 32px);
  display: grid;
  align-content: start;
}
.iso {
  aspect-ratio: 5 / 4;
  position: relative;
  margin-bottom: clamp(16px, 2vw, 28px);
}
.iso svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.iso-face,
.iso-cell,
.iso-line,
.iso-dash,
.iso-solid {
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.iso-face {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 0.5;
}
.iso-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.5;
}
.iso-dash {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.5;
  stroke-dasharray: 2 5;
}
.iso-solid {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 0.5;
}
.iso-scan {
  fill: var(--brand);
  fill-opacity: 0.16;
  stroke: var(--brand);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}
.iso-mark {
  fill: var(--brand);
  stroke: none;
}
.iso-line.is-caught {
  stroke: var(--brand);
  stroke-width: 1.2;
}
.iso-line.is-hand {
  stroke: var(--brand);
  stroke-width: 1;
}
.iso-face.is-flag {
  fill: var(--brand);
  stroke: var(--brand);
}
/* Motion. Everything eases in and eases out; nothing appears or stops short.
   Position uses the translate property and the small lift uses transform, so each has its own curve. */
.is-marching {
  animation: iso-march 2.2s linear infinite;
}
.is-blinking {
  animation: iso-blink 3.6s ease-in-out infinite;
}
.iso-go {
  animation: iso-go var(--dur, 6.5s) cubic-bezier(0.65, 0, 0.35, 1) var(--delay, 0s) infinite both, iso-hop var(--dur, 6.5s) ease-in-out var(--delay, 0s) infinite both, iso-veil var(--dur, 6.5s) ease-in-out var(--delay, 0s) infinite both;
}
.iso-go.is-flat {
  animation: iso-go var(--dur, 5s) cubic-bezier(0.65, 0, 0.35, 1) infinite both, iso-veil var(--dur, 5s) ease-in-out infinite both;
}
.iso-send {
  animation: iso-send var(--dur, 6s) cubic-bezier(0.3, 0, 0.3, 1) var(--delay, 0s) infinite both, iso-veil var(--dur, 6s) ease-in-out var(--delay, 0s) infinite both;
}
.iso-land {
  animation: iso-land var(--dur, 8s) cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) infinite both, iso-veil-long var(--dur, 8s) ease-in-out var(--delay, 0s) infinite both;
}
.iso-float {
  animation: iso-float var(--dur, 3.4s) ease-in-out infinite alternate;
}
/* A post waiting above its place: it comes down softly and lifts away the same way. */
.iso-wait {
  translate: var(--dx) var(--dy);
  opacity: 0;
  transition: translate 1.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.1s ease-in-out;
}
.iso-wait.is-landed {
  translate: 0 0;
  opacity: 1;
}
@keyframes iso-march {
  to {
    stroke-dashoffset: -14;
  }
}
@keyframes iso-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes iso-go {
  0%,
  12% {
    translate: 0 0;
  }
  78%,
  100% {
    translate: var(--dx) var(--dy);
  }
}
@keyframes iso-hop {
  0%,
  12%,
  78%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-9px);
  }
}
@keyframes iso-veil {
  0%,
  100% {
    opacity: 0;
  }
  22%,
  72% {
    opacity: 1;
  }
}
@keyframes iso-veil-long {
  0%,
  100% {
    opacity: 0;
  }
  16%,
  80% {
    opacity: 1;
  }
}
@keyframes iso-send {
  from {
    translate: 0 0;
  }
  to {
    translate: var(--dx) var(--dy);
  }
}
@keyframes iso-land {
  0% {
    translate: var(--dx) var(--dy);
  }
  30%,
  74% {
    translate: 0 0;
    animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0);
  }
  100% {
    translate: var(--dx) var(--dy);
  }
}
@keyframes iso-float {
  to {
    translate: var(--dx) var(--dy);
  }
}
.tile h3,
.format h3,
.plan h3 {
  margin: 0 0 8px;
  font-weight: 500;
  font-size: var(--h3);
  line-height: 1.15;
  letter-spacing: -0.007em;
  text-wrap: balance;
}
.tile p,
.format p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.48;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Each platform, with the picture inside that platform's own frame. */
.formats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px clamp(10px, 1.4vw, 20px);
}
.format-art {
  aspect-ratio: 4 / 5;
  background: var(--wash);
  border-radius: var(--r-l);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  overflow: hidden;
}
.format h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mock {
  position: relative;
  transition: transform 0.9s var(--ease);
}
.format:hover .mock {
  transform: scale(1.03);
}
.mock img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mock svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mock.tall {
  width: 52%;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-m);
  overflow: hidden;
}
.mock.tall::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(10, 10, 10, 0.28), rgba(10, 10, 10, 0) 22%, rgba(10, 10, 10, 0) 58%, rgba(10, 10, 10, 0.5));
}
.mock.tall svg {
  z-index: 1;
}
.mock-b {
  font: 600 12px 'Listo Sans', sans-serif;
  fill: #fff;
}
.mock-chip {
  font: 500 8.6px 'Listo Sans', sans-serif;
  fill: #0a0a0a;
}
.mock-time {
  font: 500 10.5px 'Listo Sans', sans-serif;
  fill: #fff;
}
.mock.card {
  background: var(--paper);
  border-radius: var(--r-m);
  padding: 9px;
  display: grid;
  gap: 9px;
}
.mock.wide {
  width: 84%;
}
.mock.doc {
  width: 66%;
}
.mock-video,
.mock-page {
  position: relative;
  border-radius: var(--r-s);
  overflow: hidden;
}
.mock-video {
  aspect-ratio: 16 / 9;
}
.mock-page {
  aspect-ratio: 4 / 5;
}
.mock-meta {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.mock-meta i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink-3);
}
.mock-meta span {
  display: grid;
  gap: 5px;
  padding-top: 2px;
}
.mock-meta b {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--ink);
  width: 86%;
}
.mock-meta b + b {
  width: 52%;
  background: var(--ink-3);
}
.mock-meta em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--ink-2);
}
/* A reel being swiped: two pictures on a track, the first one repeated so the loop has no seam. */
.reel-track {
  position: absolute;
  inset: 0;
  height: 300%;
  display: flex;
  flex-direction: column;
  animation: reel 9s var(--ease) infinite;
}
.is-later .reel-track {
  animation-delay: -3.2s;
}
.reel-track img {
  flex: 1 1 0;
  min-height: 0;
  animation: drift 9s ease-in-out infinite alternate;
}
.reel-track video {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  display: block;
}
@keyframes reel {
  0%,
  40% {
    transform: translateY(0);
  }
  48%,
  88% {
    transform: translateY(-33.333%);
  }
  96%,
  100% {
    transform: translateY(-66.666%);
  }
}
@keyframes drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1) translate(1.5%, -1.5%);
  }
}
/* The like: a heart in the middle, and the one in the rail fills. */
.mock svg.mock-like {
  inset: 50% auto auto 50%;
  width: 34%;
  height: auto;
  margin: -17% 0 0 -17%;
  z-index: 2;
  fill: #fff;
  opacity: 0;
  transform: scale(0.4);
  animation: like 9s var(--ease) infinite;
}
.mock-heart {
  fill: #fff;
  fill-opacity: 0;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linejoin: round;
  animation: liked 9s var(--ease) infinite;
}
.mock-heart.is-solid {
  fill-opacity: 1;
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: beat 9s var(--ease) -3.2s infinite;
}
@keyframes like {
  0%,
  17%,
  33%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
  21%,
  28% {
    opacity: 0.95;
    transform: scale(1);
  }
}
@keyframes liked {
  0%,
  19%,
  41%,
  100% {
    fill-opacity: 0;
  }
  23%,
  38% {
    fill-opacity: 1;
  }
}
@keyframes beat {
  0%,
  17%,
  29%,
  100% {
    transform: none;
  }
  22% {
    transform: scale(1.35);
  }
}
.mock-disc {
  transform-box: fill-box;
  transform-origin: center;
  animation: turn 3.2s linear infinite;
}
/* A video playing: the picture drifts, the bar fills, the play button gets out of the way. */
.mock-video img {
  animation: drift 12s ease-in-out infinite alternate;
}
.mock-play {
  animation: played 12s var(--ease) infinite;
}
@keyframes played {
  0%,
  6%,
  97%,
  100% {
    opacity: 1;
  }
  12%,
  92% {
    opacity: 0;
  }
}
.mock-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.35);
}
.mock-bar i {
  display: block;
  height: 100%;
  background: #fff;
  transform-origin: 0 50%;
  animation: playing 12s linear infinite;
}
@keyframes playing {
  0%,
  6% {
    transform: scaleX(0);
  }
  96%,
  100% {
    transform: scaleX(1);
  }
}
/* A document: three pages on a track, moved on by a click on the arrow. */
.page-track {
  position: absolute;
  inset: 0;
  width: 300%;
  display: flex;
  transform: translateX(calc(var(--n, 0) * -33.3334%));
  transition: transform 0.9s var(--ease);
}
.page-track img {
  flex: 1 1 0;
  min-width: 0;
}
.mock-next {
  transition: transform 0.26s var(--ease);
}
.mock-next.is-pressed {
  transform: scale(0.8);
}
.mock-count b {
  font-weight: inherit;
  display: inline-block;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.mock-count b.is-swapping {
  opacity: 0;
  transform: translateY(-4px);
}
.mock-count,
.mock-title {
  position: absolute;
  background: rgba(10, 10, 10, 0.78);
  color: #fff;
  font-size: 10.5px;
  line-height: 1;
}
.mock-count {
  top: 7px;
  right: 7px;
  padding: 5px 7px;
  border-radius: var(--r-s);
  font-variant-numeric: tabular-nums;
}
.mock-title {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 9px 9px;
}
.mock-next {
  position: absolute;
  right: 7px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: #fff;
}
.mock-next svg {
  fill: none;
  stroke: #0a0a0a;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  padding: 5px;
}

/* Pricing, on the violet, with the pick in lime. */
.band {
  margin-top: clamp(88px, 11vw, 168px);
  background: var(--violet);
  color: #fff;
  padding: clamp(56px, 7vw, 104px) 0;
}
.band .aside {
  color: rgba(255, 255, 255, 0.82);
}
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
}
.plan {
  --quiet: rgba(255, 255, 255, 0.82);
  --star: var(--lime);
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--r-l);
  padding: clamp(20px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.plan .button {
  margin-top: auto;
}
/* What is in it, each line marked with a six-point star. */
.plan-list {
  list-style: none;
  margin: 0 0 clamp(24px, 2.6vw, 36px);
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.3;
}
.plan-list li {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}
.plan-list li::before {
  content: '';
  width: 17px;
  height: 17px;
  margin-top: 1.5px;
  background: var(--star);
  clip-path: polygon(50.0% 0.0%, 63.5% 26.6%, 93.3% 25.0%, 77.0% 50.0%, 93.3% 75.0%, 63.5% 73.4%, 50.0% 100.0%, 36.5% 73.4%, 6.7% 75.0%, 23.0% 50.0%, 6.7% 25.0%, 36.5% 26.6%);
  transform: rotate(-120deg) scale(0);
  transition: transform 0.9s var(--ease);
  transition-delay: calc(0.25s + var(--r, 0) * 70ms + var(--n, 0) * 70ms);
}
.plan.is-in .plan-list li::before {
  transform: none;
}
.plan-list li:nth-child(2) { --n: 1; }
.plan-list li:nth-child(3) { --n: 2; }
.plan-list li:nth-child(4) { --n: 3; }
.plan-list li:nth-child(5) { --n: 4; }
.plan-list li:nth-child(6) { --n: 5; }
.plan-list li:nth-child(7) { --n: 6; }
.plan-list li:nth-child(8) { --n: 7; }
.plan-list li:nth-child(9) { --n: 8; }
.plan:hover .plan-list li::before {
  transform: rotate(60deg);
}
.plan.is-pick {
  --quiet: rgba(10, 10, 10, 0.72);
  --star: var(--violet);
  --star-ink: #fff;
  background: var(--lime);
  color: #0a0a0a;
}
/* The price, rolling down a step at a time, beside the twelve months it covers. */
.plan-head {
  align-self: stretch;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  /* The foot of the figures sits on the foot of the bars. */
  align-items: end;
  gap: clamp(18px, 3vw, 48px);
  margin: 16px 0 0;
}
.plan-price {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin: 0 0 var(--sink, -0.391em);
  font-weight: 500;
  font-size: clamp(54px, 5.6vw, 88px);
  line-height: 1;
  letter-spacing: -0.015em;
}
/* One figure shows at a time. The others pass through a soft edge above and below,
   and each has room around it, so nothing is cut and no neighbour shows. */
.roller {
  display: block;
  height: 1.5em;
  overflow: hidden;
  padding: 0 0.05em;
  margin: 0 -0.05em;
  -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent);
}
.roller-track {
  display: block;
  transform: translateY(calc(var(--i, 0) * -1.5em));
  transition: transform 0.9s var(--ease);
}
.roller-track.is-rewinding {
  transition-duration: 1.7s;
}
.roller-track span {
  display: block;
  height: 1.5em;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
/* The reduction, said plainly beside the figure. */
.minus {
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1;
  letter-spacing: -0.007em;
  font-weight: 500;
  color: var(--quiet);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-0.5em);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.minus.is-on {
  opacity: 1;
  transform: none;
}
/* Twelve months as steps down, numbered. The current month is the solid one. */
.stairs {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: clamp(2px, 0.4vw, 5px);
  height: clamp(56px, 6vw, 84px);
  max-width: 420px;
  justify-self: end;
  width: 100%;
}
.stairs i {
  position: relative;
  height: calc(var(--h) * 100%);
  background: currentColor;
  border-radius: var(--r-s);
  opacity: 0.3;
  font-style: normal;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.9s var(--ease) calc(0.35s + var(--r, 0) * 70ms + var(--n) * 45ms), opacity 0.45s var(--ease), background 0.45s var(--ease);
}
.plan.is-in .stairs i {
  transform: none;
}
.stairs i.is-now {
  opacity: 1;
}
.stairs i.is-floor.is-now {
  background: var(--star);
}
.stairs i:hover {
  opacity: 0.8;
}
.stairs b {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  text-align: center;
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  color: var(--quiet);
  transition: color 0.45s var(--ease);
}
.stairs i.is-now b {
  color: currentColor;
  font-weight: 500;
}
.stairs i::after {
  content: attr(data-t);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translate(-50%, 4px);
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0;
  transition: opacity var(--quick) var(--ease), transform var(--quick) var(--ease);
  pointer-events: none;
}
.stairs i:nth-child(-n + 2)::after {
  left: 0;
  transform: translate(0, 4px);
}
.stairs i:nth-last-child(-n + 2)::after {
  left: auto;
  right: 0;
  transform: translate(0, 4px);
}
.stairs i:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.stairs i:nth-child(-n + 2):hover::after,
.stairs i:nth-last-child(-n + 2):hover::after {
  transform: none;
}
.plan-for {
  margin: 44px 0 24px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--quiet);
  max-width: 24em;
}
.band .button {
  --fill: var(--lime);
  --fill-ink: #0a0a0a;
  background: #fff;
  border-color: #fff;
  color: #0a0a0a;
}
.band .is-pick .button {
  --fill: var(--violet);
  --fill-ink: #fff;
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #fff;
}

/* The last word, on a picture. */
.closing {
  position: relative;
  min-height: min(92vh, 820px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  color: #fff;
}
.closing-pic,
.closing-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 100%;
}
/* Enlarged from its foot, so the strip of sky at the top of the photograph never shows. */
.closing-pic img {
  transform: scale(1.22);
  transform-origin: 0 100%;
}
@media (max-aspect-ratio: 21/20) {
  .closing {
    min-height: 100vh;
  }
  .closing-pic img {
    transform: scale(1.34);
  }
}
.closing-copy {
  position: relative;
  padding-top: clamp(56px, 8vw, 120px);
}
.closing .statement {
  font-size: var(--h1);
}
.closing .button {
  --fill: #0a0a0a;
  --fill-ink: #fff;
  background: #fff;
  border-color: #fff;
  color: #0a0a0a;
}
.closing .button.ghost {
  --fill: #fff;
  --fill-ink: #0a0a0a;
  background: rgba(255, 255, 255, 0.2);
  border-color: transparent;
  color: #fff;
}

.site-foot {
  padding: 28px 0 36px;
}
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
/* On the home page the footer is part of the closing picture. */
.closing .site-foot {
  position: relative;
  color: #fff;
  padding: 0 0 clamp(18px, 2.4vw, 30px);
}
.closing .site-foot .text-button.quiet {
  color: inherit;
  opacity: 0.86;
}
.closing .site-foot .wordmark::after {
  background: #fff;
}

/* ───────── Plain pages: privacy, terms ───────── */

.site main.page {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(110px, 12vw, 170px) var(--pad) 0;
}
.page h1 {
  margin: 0;
  font-weight: 500;
  font-size: var(--h1);
  line-height: 1.02;
  letter-spacing: -0.012em;
}
.page .dated {
  margin: 16px 0 0;
  font-size: var(--body);
  color: var(--ink-2);
}
.page section {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 10px clamp(24px, 5vw, 80px);
  padding: clamp(20px, 2.6vw, 36px) 0;
}
.page section:first-of-type {
  margin-top: clamp(40px, 6vw, 80px);
}
.page h2 {
  margin: 0;
  font-weight: 500;
  font-size: var(--h3);
  letter-spacing: -0.007em;
  line-height: 1.15;
  text-wrap: balance;
}
.page section > div {
  max-width: 40em;
  font-size: var(--body);
  line-height: 1.52;
}
.page section p {
  margin: 0 0 0.9em;
}
.page section p:last-child {
  margin-bottom: 0;
}
.page section ul {
  margin: 0 0 0.9em;
  padding-left: 1.1em;
}
.page section li {
  margin-bottom: 0.35em;
}
.page section a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
}

/* ───────── Smaller screens ───────── */

@media (max-width: 1080px) {
  #demo .day {
    grid-template-columns: 60px minmax(0, 1fr);
  }
  #demo .post {
    grid-template-columns: 48px minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .site-nav .quiet {
    display: none;
  }
  .nav-burger {
    display: block;
  }
  /* On a phone the menu is one sheet with every group in it. */
  .nav-panel {
    max-height: 100vh;
    overflow-y: auto;
    border-radius: 0;
  }
  .nav-sizer {
    padding-top: 84px;
    min-height: 100vh;
  }
  .nav-groups {
    gap: 30px;
  }
  .nav-group {
    grid-area: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .nav-title {
    font-size: 14px;
    letter-spacing: 0;
    color: var(--ink-2);
    font-weight: 400;
  }
  .nav-links {
    grid-template-columns: minmax(0, 1fr);
  }
  .nav-links b {
    font-size: 21px;
    letter-spacing: -0.007em;
  }
  .nav-links span,
  .nav-card {
    display: none;
  }
  .nav-links a {
    padding: 7px 14px 8px;
  }
  .nav-foot {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-top: 6px;
  }
  .nav-foot .button {
    margin-left: auto;
  }
  .plan-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .stairs {
    justify-self: start;
  }
  .window-tabs,
  .window-meta,
  .seg {
    display: none;
  }
  .hero-copy {
    align-self: start;
    padding-top: clamp(96px, 16vh, 150px);
  }
  .hero-copy > * {
    max-width: 30rem;
  }

  .hero-fallback {
    inset: 56% 0 0 0;
    padding: 0 var(--pad);
  }
  .block-head,
  .split,
  .agent-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .trio,
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
  .trio .tile,
  .trio .tile:nth-child(n + 4) {
    grid-column: auto;
  }
  .trio .tile:nth-child(n + 4) .iso {
    aspect-ratio: 5 / 4;
  }
  .iso {
    max-width: 380px;
  }
  .talk {
    min-height: 0;
  }
  .formats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page section {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  #demo .post {
    grid-template-columns: minmax(0, 1fr);
  }
  #demo .day {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  #demo .day-number {
    font-size: 26px;
  }
  .scene-note {
    font-size: 12.5px;
  }
  .steps li {
    grid-template-columns: 18px minmax(0, 1fr);
  }
  .steps em {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-marching,
  .is-blinking,
  .iso-go,
  .iso-send,
  .iso-land,
  .iso-float,
  .iso-wait,
  .reel-track,
  .reel-track img,
  .mock-like,
  .mock-heart,
  .mock-disc,
  .mock-video img,
  .mock-play,
  .mock-bar i,
  .cal img,
  .cal .is-video::after {
    animation: none !important;
  }
  .shot.reveal .window {
    transform: none;
    filter: none;
    opacity: 1;
  }
  .word > span,
  .reveal,
  .hero-sub,
  .hero-actions,
  .roll > span {
    transform: none !important;
  }
  .steps i {
    animation: none;
  }
  .ch {
    opacity: 1;
  }
  .scene-line,
  .slot-ring {
    display: none;
  }
  .scene {
    height: auto;
  }
  .stage {
    position: static;
    height: auto;
    display: grid;
    gap: 40px;
    padding: 72px 0;
  }
  .scene-copy,
  .scene-note {
    position: static;
    transform: none !important;
    opacity: 1 !important;
  }
  .cal {
    opacity: 1 !important;
    transform: none !important;
  }
  .scene-pic {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  .agents {
    --band: #131313;
    --card: #1e1e1e;
  }
}

/* The shadow a lifted copy casts on the ground it leaves. */
.iso-shade {
  fill: var(--ink);
  fill-opacity: 0.08;
  stroke: none;
}

/* ───────── Questions ───────── */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq {
  /* Room before the closing picture, so the last question never meets it. */
  padding-bottom: clamp(88px, 11vw, 168px);
}
.faq-head {
  display: grid;
  gap: 18px;
}
.qas {
  display: grid;
  gap: 8px;
}
.qa {
  background: var(--wash);
  border-radius: var(--r-m);
  transition: background var(--quick) var(--ease);
}
/* Its own transition would otherwise replace the slide-in every other piece gets. */
.qa.reveal {
  transition: background var(--quick) var(--ease), opacity 0.8s var(--ease) calc(min(var(--r, 0), 5) * 70ms),
    transform 0.8s var(--ease) calc(min(var(--r, 0), 5) * 70ms);
}
.qa-q {
  appearance: none;
  width: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  font-size: clamp(16.5px, 1.3vw, 19px);
  line-height: 1.3;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: center;
  gap: 20px;
  padding: clamp(16px, 1.6vw, 22px) clamp(18px, 2vw, 26px);
  cursor: pointer;
}
/* A plus that turns into a minus. */
.qa-q i {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--paper);
  transition: background 0.5s var(--ease);
}
.qa-q i::before,
.qa-q i::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.6s var(--ease), background 0.5s var(--ease);
}
.qa-q i::after {
  transform: rotate(90deg);
}
.qa-q[aria-expanded='true'] i {
  background: var(--brand);
}
.qa-q[aria-expanded='true'] i::before,
.qa-q[aria-expanded='true'] i::after {
  background: #fff;
}
.qa-q[aria-expanded='true'] i::after {
  transform: rotate(0deg);
}
.qa-q:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  border-radius: var(--r-m);
}
/* The answer opens to its own height and its words rise in. */
.qa-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s var(--ease);
}
.qa-a > div {
  min-height: 0;
  overflow: hidden;
}
.qa-a p {
  margin: 0;
  padding: 0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px);
  max-width: 36em;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
}
.qa.is-open .qa-a {
  grid-template-rows: 1fr;
}
.qa.is-open .qa-a p {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}
@media (max-width: 900px) {
  .faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@supports (corner-shape: squircle) {
  .qa-q i {
    corner-shape: round;
  }
}

/* A quiet note after a feature, on the same line. */
.li-note {
  color: var(--quiet);
  opacity: 0.85;
  margin-left: 4px;
}

/* ───────── Between pages ─────────
   Arriving, the page comes up out of a blur on the paper colour; leaving, it goes back into one.
   The blur is on the content, never on the body, so the fixed bar stays where it is. */
html {
  background: var(--paper);
}
.site main,
.site > .site-foot {
  animation: page-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.site .site-mast {
  animation: page-fade-in 0.7s ease-out backwards;
}
@keyframes page-in {
  from {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(14px);
  }
}
@keyframes page-fade-in {
  from {
    opacity: 0;
  }
}
.is-leaving .site main,
.is-leaving .site > .site-foot {
  opacity: 0;
  filter: blur(16px);
  transform: translateY(-10px);
  transition: opacity 0.48s cubic-bezier(0.55, 0, 0.45, 1), filter 0.48s cubic-bezier(0.55, 0, 0.45, 1), transform 0.48s cubic-bezier(0.55, 0, 0.45, 1);
  pointer-events: none;
}
.is-leaving .dust {
  opacity: 0;
  transition: opacity 0.44s ease-in;
}
.is-leaving .site .site-mast {
  opacity: 0;
  transition: opacity 0.44s ease-in;
}
@media (prefers-reduced-motion: reduce) {
  .site main,
  .site > .site-foot,
  .site .site-mast {
    animation: none;
  }
}

/* The specks' own layer: fixed over the page, below the bar, never in the way of a click. */
.dust {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}