/* Hallmark · macrostructure: Feature Stack · tone: atmospheric · anchor hue: 182 · seed: core */
/* Hallmark · genre: atmospheric · nav: N9 edge-aligned · footer: Ft2 inline single line · one fixed WebGL2 object behind copy that scrolls */

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

/* How long the page scrolls: the one knob. Every gap between two blocks of copy is multiplied by it,
   and main.js reads it too, so each form's assembly lengthens with its gap. Measured page length:
   1 gives 8.4 screens at 1440x900 and 7.2 at 390x844; 1.3 gives 9.6 and 8.0; 1.6 gives 10.9 and 8.9.
   Copy heights do not scale, so the page grows less than the knob. Changing it live re-measures. */
:root {
  --scroll-scale: 1.3;
}

html {
  overflow-x: clip;
  background-color: var(--paper);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  min-block-size: 100svh;
  background-color: var(--paper);
  /* JS-off / no-WebGL ground: one fixed bloom where the object would be */
  background-image: radial-gradient(55% 42% at 70% 40%, var(--bloom), var(--scrim-soft) 72%);
  background-attachment: fixed;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--step-body);
  font-weight: 380;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- the object and its callouts ---------- */

/* sized to the large viewport: a phone's toolbars sliding in and out never resize the canvas */
.stage {
  position: fixed;
  inset: 0 0 auto;
  inline-size: 100%;
  block-size: 100%;
  block-size: 100lvh;
  display: block;
  z-index: var(--z-stage);
  pointer-events: none;
}

.no-webgl .stage {
  display: none;
}

.callouts {
  position: fixed;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  z-index: var(--z-callouts);
}

.callout {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--step-small);
  font-stretch: 100%;
  font-weight: 560;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  text-shadow: 0 0 2px var(--paper), 0 0 6px var(--paper), 0 0 14px var(--paper);
}

.callout::before {
  content: "";
  flex: none;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background-color: var(--accent);
}

.callout--left {
  flex-direction: row-reverse;
}

/* ---------- masthead (N9: wordmark left, one CTA right, nothing between) ---------- */

.masthead {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: max(var(--space-m), env(safe-area-inset-top)) var(--space-m);
  padding-inline: var(--gutter);
  pointer-events: none;
}

.masthead::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(var(--space-m) * -1) 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--scrim) 0%, var(--scrim-soft) 100%);
}

.masthead > * {
  pointer-events: auto;
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--step-lede);
  font-stretch: 75%;
  font-weight: 820;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover {
  color: var(--accent);
}

.wordmark:active {
  color: var(--ink-soft);
}

/* ---------- actions ---------- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  padding-inline: var(--space-l);
  border-radius: var(--radius-pill);
  background-color: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--step-body);
  font-stretch: 100%;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.cta:hover {
  background-color: var(--accent-press);
}

.cta:active {
  transform: translateY(1px);
}

.cta[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.cta--quiet {
  min-block-size: 2.5rem;
  padding-inline: var(--space-m);
  background-color: var(--scrim);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--accent);
  transition:
    background-color var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out),
    opacity var(--dur-short) var(--ease-out),
    visibility 0s linear 0s;
}

.cta--quiet:hover {
  background-color: var(--paper-2);
}

/* while the hero's own CTA is on screen the masthead one steps aside;
   visibility: hidden also takes it out of the tab order (JS adds the class, so JS-off keeps it) */
.cta--quiet.is-tucked {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-short) var(--ease-out),
    visibility 0s linear var(--dur-short);
}

.textlink {
  color: var(--ink);
  font-weight: 560;
  line-height: 1;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-muted);
  text-underline-offset: 0.3em;
  white-space: nowrap;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}

.textlink:hover {
  text-decoration-color: var(--accent);
}

.textlink:active {
  color: var(--ink-soft);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.skip {
  position: fixed;
  inset-block-start: var(--space-s);
  inset-inline-start: var(--space-s);
  z-index: var(--z-skip);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-pill);
  background-color: var(--paper-2);
  color: var(--ink);
  text-decoration: none;
  transform: translateY(-300%);
}

.skip:focus-visible {
  transform: none;
}

/* ---------- chapters: copy scrolling over the fixed object ---------- */

main {
  position: relative;
  z-index: var(--z-content);
}

/* without the object (JS off, or no WebGL2) the chapters simply follow one another */
.chapter {
  --chapter-pad: var(--space-4xl);
  --gap: 0px;
  position: relative;
  padding-block-start: var(--chapter-pad);
  padding-inline: var(--gutter);
}

/* with the object running, every block of copy scrolls at the page's own speed and never stops. The
   gap after each block (times --scroll-scale) is the scroll its form gets: main.js starts the form as
   its copy comes up from the foot of the screen and has it whole by the time the copy reaches its
   reading place, then hands over as the next copy comes up. */
.has-webgl .chapter {
  --chapter-pad: 4svh;
  --gap: 33svh;
}

.chapter::after {
  content: "";
  display: block;
  block-size: calc(var(--gap) * var(--scroll-scale));
}

.copy {
  position: relative;
  isolation: isolate;
  max-inline-size: var(--measure);
}

/* a block that holds focus is never left faded out by the scroll */
.copy:focus-within {
  opacity: 1 !important;
}

/* each block of copy carries its own dark halo, so the 4.5:1 floor holds wherever the object drifts */
.copy::before {
  content: "";
  position: absolute;
  inset: calc(var(--space-2xl) * -1);
  z-index: -1;
  background: radial-gradient(closest-side, var(--scrim), var(--scrim-soft));
  pointer-events: none;
}

.copy > * + * {
  margin-block-start: var(--space-l);
}

.copy p {
  margin-block-end: 0;
  max-inline-size: 60ch;
  text-wrap: pretty;
}

.chapter--hero {
  --chapter-pad: max(6.5rem, 17svh);
}

/* the hero's gap is not scaled: it only keeps the spec's copy below the first screen */
.has-webgl .chapter--hero {
  --chapter-pad: max(6.5rem, 17svh);
  --gap: calc(42svh / var(--scroll-scale));
}

/* the hero is centred over the horizon: the headline, then the sea with your sentence glowing in it */
.chapter--hero .copy,
.has-webgl .chapter--hero .copy {
  max-inline-size: 64rem;
  margin-inline: auto;
  text-align: center;
}

/* wide, short paragraphs so the hero stays shallow and more of the sea shows below it */
.chapter--hero .copy .lede {
  margin-inline: auto;
  max-inline-size: 74ch;
  text-wrap: balance;
}

.chapter--hero .copy .actions {
  justify-content: center;
  margin-inline: auto;
  max-inline-size: none;
}

/* short phones: the hero tightens so the sentence in the sea is still whole on the first screen */
@media (max-width: 59.99rem) and (max-height: 46.24rem) {
  .chapter--hero {
    --chapter-pad: max(5rem, 11svh);
  }

  /* and the spec follows it sooner, so the first scroll never runs dry of copy */
  .has-webgl .chapter--hero {
    --chapter-pad: max(5rem, 11svh);
    --gap: calc(30svh / var(--scroll-scale));
  }

  .chapter--hero .display {
    font-size: var(--step-title);
  }

  .chapter--hero .copy .lede {
    font-size: var(--step-body);
  }

  .chapter--hero .copy > * + * {
    margin-block-start: var(--space-m);
  }

  .chapter--hero .copy .actions {
    margin-block-start: var(--space-l);
  }
}

/* the page's one orchestrated entrance: the hero copy, once, on load */
.chapter--hero .copy > * {
  animation: arrive var(--dur-long) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.chapter--hero .copy > :nth-child(2) {
  --i: 1;
}

.chapter--hero .copy > :nth-child(3) {
  --i: 2;
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

/* the climax breaks the column: one centred line, the converged object above it */
.chapter--converge .copy {
  margin-inline: auto;
  max-inline-size: 72rem;
  text-align: center;
}

.chapter--converge .copy p {
  margin-inline: auto;
  max-inline-size: var(--measure);
}

/* the page ends with the closing copy low on the screen and the sentence above it; its gap is not
   scaled, it only sets where the copy stops */
.has-webgl .chapter--cta {
  --gap: calc(10svh / var(--scroll-scale));
}

.chapter--cta .copy {
  max-inline-size: 42rem;
}

/* ---------- type ---------- */

.display {
  margin: 0;
  min-inline-size: 0;
  font-family: var(--font-display);
  font-size: var(--step-display);
  font-stretch: 84%;
  font-weight: 780;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.mega {
  margin: 0;
  min-inline-size: 0;
  font-family: var(--font-display);
  font-size: var(--step-mega);
  font-stretch: 78%;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.lede {
  font-size: var(--step-lede);
  line-height: 1.5;
  color: var(--ink-soft);
}

.copy .lede {
  max-inline-size: 46ch;
}

.title {
  margin: 0;
  min-inline-size: 0;
  font-family: var(--font-display);
  font-size: var(--step-title);
  font-stretch: 86%;
  font-weight: 720;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* act two: each world is named at display scale, its promise set thin beneath (the hero's two weights) */
.world {
  margin: 0;
  min-inline-size: 0;
  font-family: var(--font-display);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.world__name {
  display: block;
  font-size: var(--step-display);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* on the narrowest phones the name steps down a size, so it holds one line and the object keeps its room */
@media (max-width: 23.99rem) {
  .world__name {
    font-size: var(--step-title);
  }
}

.world__line {
  display: block;
  margin-block-start: var(--space-s);
  font-size: var(--step-sub);
  font-stretch: 88%;
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  text-wrap: balance;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m) var(--space-xl);
}

.copy .actions {
  margin-block-start: var(--space-xl);
}

/* a scenario, set as plain type on a raised surface (no window chrome) */
.scenario {
  display: grid;
  gap: var(--space-2xs);
  margin-inline: 0;
  margin-block-end: 0;
  padding: var(--space-m) var(--space-l);
  border-radius: 0.875rem;
  background-color: var(--paper-2);
}

.scenario div {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-s);
  align-items: baseline;
}

.scenario dt {
  font-family: var(--font-display);
  font-stretch: 90%;
  font-weight: 700;
  color: var(--ink);
}

.scenario dd {
  margin: 0;
  color: var(--ink-soft);
}

/* on the narrowest phones the scenario keeps one line a step, so the copy stays short enough to leave
   the form its room above it */
@media (max-width: 23.99rem) {
  .scenario {
    padding-inline: var(--space-m);
  }

  .scenario div {
    grid-template-columns: 3rem minmax(0, 1fr);
  }
}

/* ---------- the early-access form (closing chapter) ---------- */
/* Hallmark · component: form · genre: atmospheric · theme: core tokens
 * states: default · hover · focus · active · disabled · loading · error · success
 * every field keeps a 1px edge in every state: state shows in colour, outline and background, never in
 * border width, so nothing shifts as a field takes focus or an error */

.signup {
  display: grid;
  gap: var(--space-m);
  max-inline-size: 36rem;
}

/* display: grid would otherwise outrank the hidden attribute once the form is sent */
.signup[hidden] {
  display: none;
}

.field {
  display: grid;
  gap: var(--space-xs);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field__label {
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--step-body);
  font-stretch: 100%;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

/* a legend ignores its fieldset's grid gap, so it carries its own */
legend.field__label {
  margin-block-end: var(--space-xs);
}

.field__opt {
  margin-inline-start: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--step-small);
  font-weight: 380;
  color: var(--ink-muted);
}

.field__input {
  inline-size: 100%;
  min-block-size: 3rem;
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--rule);
  border-radius: 0.75rem;
  background-color: var(--paper-2);
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}

.field__input--area {
  min-block-size: 6.5rem;
  resize: vertical;
}

@media (hover: hover) {
  .field__input:hover {
    border-color: var(--rule-strong);
  }
}

/* focus shows at once, never eased in: the ring is the shared one, the edge goes to the accent */
.field__input:focus-visible {
  border-color: var(--accent);
  outline-offset: 2px;
  transition: none;
}

.field__input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.field__input[aria-invalid="true"] {
  border-color: var(--danger);
}

/* help or error under the field, in the same place; it always holds a line, so an error never moves
   the fields below it */
.field__msg {
  min-block-size: 1lh;
  margin: 0;
  font-size: var(--step-small);
  line-height: 1.45;
  color: var(--ink-muted);
}

/* the role has no help text, and only the server can find fault with it: no line held for it */
.field--choices .field__msg:empty {
  display: none;
}

.field__msg.is-error,
.signup__status--error {
  color: var(--danger);
}

.field__msg.is-error::before,
.signup__status--error::before {
  content: "! ";
  font-weight: 700;
}

/* the four worlds, as chips: the radio is the control (focusable, checkable), the chip is its face */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.choice {
  position: relative;
  display: inline-flex;
}

.choice input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice span {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-inline: var(--space-m);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background-color: var(--paper-2);
  color: var(--ink-soft);
  font-size: var(--step-small);
  font-weight: 560;
  line-height: 1;
  white-space: nowrap;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out);
}

@media (hover: hover) {
  .choice input:hover + span {
    border-color: var(--rule-strong);
    color: var(--ink);
  }
}

.choice input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.choice input:active + span {
  transform: translateY(1px);
}

.choice input:checked + span {
  border-color: var(--accent);
  background-color: var(--scrim);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.choice input:disabled + span {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Turnstile shows here only if it needs the visitor (appearance: interaction-only); otherwise empty */
.signup__check:empty {
  display: none;
}

.signup__status {
  margin: 0;
  font-size: var(--step-small);
  line-height: 1.45;
  color: var(--ink-soft);
}

.signup__status:empty {
  display: none;
}

/* the one row the closing screen needs: the address and the button beside it (stacked on a phone) */
.signup__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label label"
    "input send"
    "msg msg";
  gap: var(--space-xs) var(--space-s);
  align-items: center;
}

.signup__main .field__label {
  grid-area: label;
}

.signup__main .field__input {
  grid-area: input;
}

.signup__main .cta {
  grid-area: send;
  min-block-size: 3rem;
  border: 0;
  cursor: pointer;
}

.signup__main .field__msg {
  grid-area: msg;
}

@media (max-width: 29.99rem) {
  .signup__main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "input"
      "msg"
      "send";
  }

  .signup__main .cta {
    justify-self: start;
  }
}

/* the optional questions, one step away */
/* block, not flex: on the narrowest phones "Optional" then wraps as a word rather than as a column */
.signup__more > summary {
  display: block;
  padding-block: var(--space-s);
  color: var(--ink);
  font-weight: 560;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.signup__more > summary::-webkit-details-marker {
  display: none;
}

.signup__more > summary::before {
  content: "+";
  display: inline-block;
  inline-size: 1rem;
  margin-inline-end: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}

.signup__more[open] > summary::before {
  content: "\2212";
}

@media (hover: hover) {
  .signup__more > summary:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 0.3em;
  }
}

.signup__more > summary:active {
  color: var(--ink-soft);
}

.signup__more > * + * {
  margin-block-start: var(--space-m);
}

.signup__privacy {
  margin: 0;
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--ink-muted);
}

.signup__privacy .textlink {
  white-space: nowrap;
}

/* sending: the label says so and the button holds still; the fields stay editable */
.cta:disabled,
.cta[data-state="loading"] {
  opacity: 0.7;
  cursor: progress;
  transform: none;
}

.cta[data-state="loading"]::before {
  content: "";
  inline-size: 0.875rem;
  block-size: 0.875rem;
  margin-inline-end: var(--space-xs);
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* done: the form gives way to two quiet lines in its place, no toast and no fanfare */
.signup-done {
  max-inline-size: 36rem;
  padding: var(--space-l);
  border: 1px solid var(--accent);
  border-radius: 0.875rem;
  background-color: var(--paper-2);
}

.signup-done:focus {
  outline: none;
}

.signup-done:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.signup-done > * {
  margin: 0;
}

.signup-done > * + * {
  margin-block-start: var(--space-xs);
}

.signup-done__title {
  font-family: var(--font-display);
  font-size: var(--step-sub);
  font-stretch: 88%;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

/* ---------- a page of plain prose (privacy) ---------- */

.prose h2 {
  margin-block: var(--space-2xl) 0;
  font-family: var(--font-display);
  font-size: var(--step-sub);
  font-stretch: 88%;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}

.prose .textlink {
  white-space: normal;
}

/* a prose page reads left-aligned in one column, at every width */
.chapter--prose .copy,
.has-webgl .chapter--prose .copy {
  max-inline-size: 42rem;
  margin-inline: auto;
  text-align: start;
}

.chapter--prose .copy .lede {
  margin-inline: 0;
}

.chapter--prose .copy .actions {
  justify-content: flex-start;
}

.chapter--prose {
  padding-block-end: var(--space-2xl);
}

/* ---------- footer (Ft2: one quiet line under the closing sentence) ---------- */

.colophon {
  position: relative;
  z-index: var(--z-content);
  padding-block: var(--space-2xl) max(var(--space-xl), env(safe-area-inset-bottom));
  padding-inline: var(--gutter);
}

.colophon__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-l);
  margin: 0;
  color: var(--ink-muted);
}

/* ---------- desktop: copy in a column, the object takes the rest ---------- */

@media (min-width: 60rem) {
  .has-webgl .chapter {
    --chapter-pad: 4svh;
    --gap: 49svh;
  }

  .copy {
    max-inline-size: min(var(--measure), 44%);
  }

  /* act two hands the column to the right, leaving the object the left; without the object the page
     stays one left-aligned column */
  .has-webgl .chapter--end .copy {
    margin-inline-start: auto;
  }

  /* the spec's copy follows close behind the hero, so the page never sits empty between them */
  .has-webgl .chapter--hero {
    --chapter-pad: max(7rem, 19svh);
    --gap: calc(22svh / var(--scroll-scale));
  }

  .chapter--hero .copy,
  .has-webgl .chapter--hero .copy {
    max-inline-size: min(76rem, 100%);
  }

  .chapter--converge .copy,
  .has-webgl .chapter--converge .copy {
    max-inline-size: 72rem;
  }

  /* the climax spans the screen with its form above it, so act two follows it closer: its first form
     starts before the climax's form, which rides up with its copy, has left the screen */
  .has-webgl .chapter--converge {
    --gap: 16svh;
  }

  .has-webgl .chapter--cta {
    --gap: calc(10svh / var(--scroll-scale));
  }

  .chapter--cta .copy,
  .has-webgl .chapter--cta .copy {
    max-inline-size: min(50rem, 64%);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* transitions are 0s, not a token 1ms: every property transitions by default, so even 1ms would
     set something easing on its own */
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }

  /* nothing travels: the hero copy is simply there */
  .chapter--hero .copy > * {
    animation: none;
  }

  .cta:active {
    transform: none;
  }

  /* the sending spinner holds still; the label already says what is happening */
  .cta[data-state="loading"]::before {
    animation: none;
  }
}