/* Closing: manifesto lit word by word, questions and the final invitation. */
.manifesto {
  border-top: 1px solid var(--color-border);
}
.motion .manifesto {
  height: 230vh;
}
.manifesto-sticky {
  display: flex;
  align-items: center;
  padding-block: 140px;
}
.motion .manifesto-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding-block: 0;
}
.manifesto-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  align-items: end;
  gap: 64px;
}
.manifesto-mark {
  position: absolute;
  top: -0.55em;
  left: -0.08em;
  font-family: var(--font-heading);
  font-size: 220px;
  line-height: 1;
  color: var(--color-logo);
  opacity: 0.22;
}
.manifesto h2 {
  position: relative;
  font-size: clamp(48px, 6.6vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.manifesto h2 em {
  font-style: normal;
  color: var(--color-brand);
}
.manifesto .word {
  color: rgba(38, 40, 36, 0.14);
  transition: color 400ms var(--ease-out);
}
.manifesto em .word {
  color: rgba(186, 62, 39, 0.16);
}
.manifesto .word.is-lit {
  color: var(--color-text);
}
.manifesto em .word.is-lit {
  color: var(--color-brand);
}
.manifesto-aside {
  display: grid;
  gap: 14px;
  color: var(--color-text-muted);
}
.manifesto-aside p:first-child {
  color: var(--color-text);
  font-weight: 600;
}
.manifesto-signature {
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--color-brand);
}

.faq-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
  padding: 150px 0;
  border-top: 1px solid var(--color-border);
}
.faq-section > div:first-child {
  align-self: start;
  position: sticky;
  top: 110px;
}
.faq-section h2 {
  margin-top: 18px;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.faq-list details {
  border-top: 1px solid var(--color-border);
}
.faq-list details:last-child {
  border-bottom: 1px solid var(--color-border);
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: clamp(19px, 1.6vw, 24px);
  letter-spacing: -0.015em;
  transition: color 200ms;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary:hover {
  color: var(--color-brand);
}
.faq-list summary span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 300;
  transition:
    transform 400ms var(--ease-out),
    background 300ms,
    color 300ms;
}
.faq-list details[open] summary span {
  transform: rotate(45deg);
  background: var(--flow-ink);
  border-color: var(--flow-ink);
  color: var(--flow-paper);
}
.faq-list details p {
  max-width: 640px;
  padding: 0 60px 28px 0;
  color: var(--color-text-muted);
}
.motion .faq-list details[open] p {
  animation: fade-up 500ms var(--ease-out);
}

.final-cta {
  position: relative;
  overflow: clip;
  padding: 190px 0 170px;
  background: var(--color-stage);
  color: var(--stage-text);
  text-align: center;
  isolation: isolate;
}
.final-cta-inner {
  display: grid;
  justify-items: center;
  gap: 28px;
}
.final-cta .eyebrow {
  justify-content: center;
  color: var(--stage-muted);
}
.final-cta h2 {
  font-size: clamp(56px, 8.4vw, 136px);
  line-height: 0.94;
  letter-spacing: -0.05em;
}
.final-cta h2 span {
  color: #f2967d;
}
.final-cta .button {
  min-height: 62px;
  margin-top: 8px;
  padding-inline: 30px;
}
.cta-note {
  font-size: 14px;
  color: var(--stage-muted);
}
.cta-ribbon {
  stroke: #f2967d;
  stroke-opacity: 0.6;
}
.motion .cta-ribbon path {
  stroke-dashoffset: max(0, calc(1 - var(--p, 1) * 1.7));
}
.cta-mark {
  position: absolute;
  z-index: -1;
  right: -60px;
  bottom: -90px;
  width: clamp(260px, 30vw, 440px);
  opacity: 0.14;
}
.motion .cta-mark {
  rotate: calc(var(--p, 0.5) * 36deg - 18deg);
}
.cta-nets {
  display: flex;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.cta-nets li {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-stage-line);
  border-radius: 50%;
}
.cta-nets img {
  filter: invert(1);
  opacity: 0.85;
}
.cta-nets .is-iguana img {
  filter: none;
  opacity: 1;
}
.motion .final-cta-inner.is-in .cta-nets li {
  animation: pop 600ms var(--ease-spring) both;
}
.motion .final-cta-inner.is-in .cta-nets li:nth-child(2) { animation-delay: 80ms; }
.motion .final-cta-inner.is-in .cta-nets li:nth-child(3) { animation-delay: 160ms; }
.motion .final-cta-inner.is-in .cta-nets li:nth-child(4) { animation-delay: 240ms; }
.motion .final-cta-inner.is-in .cta-nets li:nth-child(5) { animation-delay: 320ms; }
