/* ola.css: the system. Tokens, the room, the header, type, the field, the
   shared motions. The home page's sections live in home.css. */

/* ---------- tokens ---------- */

:root {
  --ground:        #F7F6F4;
  --ground-deep:   #EDECEA;
  --ink:           #141519;
  --ink-body:      #5C606A;
  --ink-quiet:     #62656D;
  --hairline:      rgba(0, 0, 0, 0.08);
  --glass-edge:    rgba(0, 0, 0, 0.10);
  --glass-edge-lit:rgba(0, 0, 0, 0.22);
  --inner-light:   rgba(255, 255, 255, 0.90);
  --shadow:        rgba(24, 28, 38, 0.14);
  --shadow-soft:   rgba(24, 28, 38, 0.08);

  --deep:          #0C0D10;
  --ink-on-deep:   #F2F3F5;
  --ink-on-deep-2: #9EA3AB;

  /* the only two colours, and only inside a product surface */
  --live:          #2C63D2;
  --good:          #2FB457;
  --wash:          rgba(44, 99, 210, 0.06);

  /* text drawn as bars inside a scene */
  --bar:           #E5E6EA;
  --bar-2:         #C9CDD4;
  --bar-3:         #A9AEB7;

  --card:          #FFFFFF;
  --r-card:        28px;
  --r-float:       20px;
  --r-tile:        14px;
  --radius:        999px;

  --sans: "InterVariable", "Inter Fallback", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --h1:     clamp(44px, 7vw, 104px);
  --h2:     clamp(34px, 4.8vw, 68px);
  --quote:  clamp(23px, 2.6vw, 38px);
  --lede:   clamp(18px, 1.55vw, 23px);
  --body:   17px;
  --field:  17px;
  --micro:  13px;

  --measure:  1180px;
  --column:   600px;
  --gutter:   24px;
  --band:     clamp(88px, 13vh, 160px);

  --field-h:  62px;

  /* elevation: alpha falls as blur and offset rise, closed by an inset top
     light so a surface reads as lit and not merely raised */
  --ladder-low:
      0 0.87px  3.08px  0 rgba(183, 181, 203, 0.31),
      0 4.37px  6.16px  0 rgba(183, 181, 203, 0.27),
      0 9.18px  8.01px  0 rgba(183, 181, 203, 0.16),
      0 16.61px 9.24px  0 rgba(183, 181, 203, 0.05),
      inset 0 3px 14px 0 rgba(255, 255, 255, 0.92);
  --ladder:
      0 2px 4px rgba(0, 0, 0, 0.04),
      0 7px 7px rgba(0, 0, 0, 0.03),
      0 16px 9px rgba(0, 0, 0, 0.02),
      0 28px 11px rgba(0, 0, 0, 0.012),
      inset 0 2px 10px rgba(255, 255, 255, 0.9);
  --ladder-lite:
      0 1px 2px rgba(0, 0, 0, 0.035),
      0 3px 8px rgba(0, 0, 0, 0.035),
      0 8px 28px rgba(0, 0, 0, 0.043);
  --ladder-hover:
      0 1px 2px rgba(0, 0, 0, 0.035),
      0 3px 8px rgba(0, 0, 0, 0.035),
      0 8px 28px rgba(0, 0, 0, 0.043),
      0 22px 44px -18px rgba(24, 28, 38, 0.18);

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-text: cubic-bezier(0.22, 0.9, 0.28, 1);
  --spring:    cubic-bezier(0.34, 3.85, 0.64, 1);
  /* stiffness 400, damping 40, mass 1: critically damped, solved, .5s */
  --settle:    linear(0, 0.264 10%, 0.594 20%, 0.801 30%, 0.908 40%, 0.96 50%, 0.983 60%, 0.997 80%, 1);
}

@media (min-width: 900px) { :root { --gutter: 32px; } }
@media (max-width: 700px) {
  :root {
    --band:    44px;     /* two of these meet between sections: one rhythm unit of 88 */
    --field:   16.5px;   /* never below 16: iOS zooms the page on focus */
    --field-h: 56px;
    --body:    16.5px;
  }
}
@media (max-width: 360px) { :root { --gutter: 20px; } }

/* ---------- the family ---------- */

@font-face {
  font-family: "InterVariable";
  src: url("./fonts/inter-subset.woff2?v=04bab35") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* metric-matched, so the swap changes the shapes and almost nothing else */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Segoe UI"), local("Roboto");
  size-adjust: 105.3%;
  ascent-override: 92.0%;
  descent-override: 22.9%;
  line-gap-override: 0%;
}

/* ---------- the room ---------- */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--body)/1.5 var(--sans);
  font-variation-settings: "opsz" 14;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

main { position: relative; z-index: 1; }
img, video, canvas, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- the frame ---------- */

.frame {
  position: fixed;
  z-index: 30;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  /* the gap opens with the call to join, so the bar's whole width change is
     the pill's own width and nothing else */
  column-gap: 0;
  height: 54px;
  padding: 0 22px;
  border-radius: var(--radius);
  background:
    linear-gradient(-75deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.42) 48%,
      rgba(255, 255, 255, 0.10));
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  box-shadow:
    inset 0 1px 1px var(--inner-light),
    inset 0 -1px 1px var(--shadow-soft),
    0 1px 3px var(--shadow-soft),
    0 10px 26px -8px var(--shadow);
  transition: padding .58s var(--ease), column-gap .58s var(--ease),
              background .4s var(--ease), box-shadow .4s var(--ease);
}

.wordmark {
  font-size: 19px;
  font-weight: 500;
  font-variation-settings: "opsz" 18;
  letter-spacing: 0.012em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  transition: color .4s var(--ease), margin-inline-end .58s var(--ease);
}

/* The call to join is handed from the hero to the frame when the hero's own
   field has left the screen. It takes no room until then.

   IT GROWS, IT DOES NOT FADE. The slot's width and the pill's own clip open on
   the same curve over the same time, so the pill's round cap is whole at every
   step: the bar extrudes it. It used to fade in behind a square-edged window,
   which showed a grey slab with a cut right edge for a quarter of a second. */
.frame-cta {
  display: grid;
  grid-template-columns: 0fr;
  visibility: hidden;
  transition:
    grid-template-columns .58s var(--ease),
    visibility 0s linear .58s;
}
/* No overflow clip here. A single `Nfr` column with N under 1 takes only that
   fraction of its own container, so the slot resolves to p squared while the
   column resolves to p: a window cut here would slice the pill short of its
   cap for the whole hand-in. The pill's own clip is the only thing that shapes
   it, and it opens on exactly the column's curve. */
.frame-cta > span { min-width: 0; display: flex; align-items: center; }
.frame.has-cta { padding-right: 8px; column-gap: 12px; }
.frame.has-cta .frame-cta {
  grid-template-columns: 1fr;
  visibility: visible;
  transition:
    grid-template-columns .58s var(--ease),
    visibility 0s;
}
/* once somebody has joined, the bar has nothing left to ask: it takes the pill
   back and closes to the mark, instead of standing there offering a control
   that now does nothing */
html:has(.capture.is-joined) .frame.has-cta { padding-left: 16px; padding-right: 16px; column-gap: 0; }
html:has(.capture.is-joined) .frame.has-cta .frame-cta {
  grid-template-columns: 0fr;
  visibility: hidden;
  transition:
    grid-template-columns .58s var(--ease),
    visibility 0s linear .58s;
}
html:has(.capture.is-joined) .frame.has-cta .frame-cta .pill { clip-path: inset(0 100% 0 0 round var(--radius)); }

.pill {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--ground);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.006em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(24, 28, 38, 0.28);
  transition: transform .16s var(--ease), filter .16s var(--ease), box-shadow .3s var(--ease),
              background .4s var(--ease), color .4s var(--ease),
              clip-path .58s var(--ease);
}
@media (hover: hover) {
  .pill:hover { transform: translateY(-1px); filter: brightness(1.18); box-shadow: 0 6px 16px -4px rgba(24, 28, 38, 0.34); }
}
.pill:active { transform: scale(0.97); }
.frame-cta .pill { clip-path: inset(0 100% 0 0 round var(--radius)); }
.frame.has-cta .frame-cta .pill { clip-path: inset(0 0% 0 0 round var(--radius)); }
/* the slot clips whatever falls outside the bar, so the pill's ring is drawn
   inside it, and a pill's ring is a pill */
.pill:focus-visible { outline-offset: -4px; border-radius: var(--radius); }

/* the long label cannot fit beside the mark on the narrowest phones */
.pill-short { display: none; }
@media (max-width: 420px) { .pill-long { display: none; } .pill-short { display: inline; } }

/* a phone held sideways has no room for a bar that follows: it stays at the top of the page */
@media (max-height: 480px) { .frame { position: absolute; } }

/* over the deep section a dark bar on black is a hole */
.on-deep-frame .frame {
  background:
    linear-gradient(-75deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.16) 48%,
      rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.24),
    inset 0 -1px 1px rgba(0, 0, 0, 0.30),
    0 10px 30px -10px rgba(0, 0, 0, 0.55);
}
.on-deep-frame .wordmark { color: var(--ink-on-deep); }
.on-deep-frame .frame .pill { background: var(--ink-on-deep); color: #101216; }
@media (hover: hover) { .on-deep-frame .frame .pill:hover { filter: brightness(0.92); } }

/* ---------- bands and their type ---------- */

.band {
  position: relative;
  padding: var(--band) var(--gutter);
}
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}

.h1, .h2 {
  font-weight: 400;
  color: var(--ink);
  text-wrap: balance;
}
.h1 {
  font-size: var(--h1);
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.04em;
  line-height: 0.96;
}
.h2 {
  font-size: var(--h2);
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.034em;
  line-height: 1.0;
}
.lede {
  font-size: var(--lede);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--ink-body);
  text-wrap: pretty;
}
.head { max-width: 760px; }
.head .lede { margin-top: clamp(18px, 2.2vw, 28px); max-width: 600px; }
.head.is-centred { margin-inline: auto; text-align: center; }
.head.is-centred .lede { margin-inline: auto; }

.caption {
  font-size: var(--micro);
  line-height: 1.5;
  color: var(--ink-quiet);
}

/* what somebody says to it: always in their words, always in quotes */
.ask {
  font-size: var(--quote);
  font-weight: 500;
  letter-spacing: -0.026em;
  line-height: 1.14;
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- the field ---------- */

.capture {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 460px;
  height: var(--field-h);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--ladder-low), 0 0 0 1px var(--glass-edge);
  transition: box-shadow .38s var(--ease), transform .38s var(--ease);
}
.capture:focus-within {
  box-shadow: var(--ladder-low), 0 0 0 1px var(--glass-edge-lit);
  transform: translateY(-1px);
}

.field {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 8px 0 26px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  font: 400 var(--field)/1 var(--sans);
  font-variation-settings: "opsz" 16;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.field::placeholder { color: var(--ink-quiet); opacity: 1; }
.field:focus, .field:focus-visible { outline: 0; }
.aux-field { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }

.go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: calc(var(--field-h) - 14px);
  margin-right: 7px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--ground);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.008em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .16s var(--ease), filter .16s var(--ease), opacity .3s var(--ease);
}
.go svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .42s var(--ease), opacity .34s var(--ease); }
@media (hover: hover) {
  .go:hover { filter: brightness(1.18); }
  .go:hover svg { transform: translateX(2px); }
}
.go:active { transform: scale(0.97); }
.go:disabled { cursor: wait; opacity: .58; transform: none; }
.go.is-away svg { transform: translateX(22px); opacity: 0; }

/* the status takes the note's own line, because it is the answer to the
   promise the note makes; the note stands down while it speaks */
.capture-status {
  position: absolute;
  top: calc(100% + 14px);
  left: 26px;
  right: 8px;
  min-height: 1em;
  font-size: var(--micro);
  line-height: 1.5;
  color: var(--ink-quiet);
}
.note {
  margin-top: 14px;
  padding-left: 26px;
  font-size: var(--micro);
  line-height: 1.5;
  color: var(--ink-quiet);
  transition: opacity .22s var(--ease);
}
.capture:has(.capture-status:not(:empty)) + .note { opacity: 0; }

/* joined: the field gives way to the answer, in the same pill */
.capture.is-joined .field, .capture.is-joined .go { display: none; }
.capture .joined {
  display: none;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 22px;
  font-size: 15.5px;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.capture.is-joined .joined { display: flex; animation: joined .7s var(--ease) both; }
.joined svg { flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: var(--good); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.joined a { margin-left: auto; color: inherit; font-weight: 500; text-underline-offset: 3px; white-space: nowrap; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes joined { from { opacity: 0; transform: translateY(8px); } }

.capture.on-deep {
  background: rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.26),
    inset 0 -1px 1px rgba(0, 0, 0, 0.34),
    0 18px 40px -14px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(255, 255, 255, 0.14);
}
.capture.on-deep:focus-within {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.34),
    inset 0 -1px 1px rgba(0, 0, 0, 0.34),
    0 18px 40px -14px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(255, 255, 255, 0.30);
}
.capture.on-deep .field, .capture.on-deep .joined { color: var(--ink-on-deep); }
.capture.on-deep .field::placeholder { color: #D5D7DC; }
.capture.on-deep .go { background: var(--ink-on-deep); color: #101216; }
@media (hover: hover) { .capture.on-deep .go:hover { filter: brightness(0.92); } }
.capture.on-deep .capture-status, .capture.on-deep + .note { color: var(--ink-on-deep-2); }

:where(a, button, input):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}
/* the field's own outline is suppressed so the pill is the focus object,
   which means the pill has to carry the indicator */
.capture:has(.field:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.capture.on-deep:has(.field:focus-visible) { outline-color: var(--ink-on-deep); }

@media (max-width: 420px) {
  .go { padding: 0 16px; }
  .field { padding-left: 22px; }
  .capture-status { left: 22px; }
  .note { padding-left: 22px; }
}

/* ---------- rise, words ---------- */

/* Ordinary css is the FINAL state, and it is what stands there until a thing
   is reached: a heading is never an empty space waiting to be filled. Being
   reached (just before it enters the screen) starts the arrival, which runs
   FROM hidden as a keyframe, so the switch happens out of sight. Only what is
   on screen at load waits hidden for its cue, for the length of one frame. */
.armed [data-now]:not(.in) { opacity: 0; }
.armed .rise.in { animation: rise-in .7s var(--ease) var(--d, 0ms) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } }

/* A heading arrives word by word, out of focus and a little low. Each word is
   its own inline-block; the padding and negative margin pair lets a tight
   line-height crop nothing while the word is still below its line. */
.words .w {
  display: inline-block;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.armed .words.in .w { animation: word-in .65s var(--ease-text) var(--d, 0ms) both; }
@keyframes word-in { from { opacity: 0; transform: translateY(0.22em); filter: blur(10px); } }
.no-blur .armed .words.in .w, .no-blur.armed .words.in .w { animation-name: word-in-plain; }
@keyframes word-in-plain { from { opacity: 0; transform: translateY(0.22em); } }

/* ---------- letters ---------- */

.wd { display: inline-block; white-space: nowrap; }
.ltr {
  display: inline-block;
  transform: translateY(0);
  opacity: 1;
  filter: blur(0px);
  transition:
    transform .26s var(--ease) var(--d, 0ms),
    opacity   .22s var(--ease) var(--d, 0ms),
    filter    .22s var(--ease) var(--d, 0ms),
    color     .9s var(--ease) calc(var(--d, 0ms) + 420ms);
}
/* parked below, out of focus, in the hue it arrives with */
.letters.is-in .ltr { transform: translateY(14px); opacity: 0; filter: blur(4px); color: var(--rise, inherit); transition: none; }
.letters.is-out .ltr { transform: translateY(-14px); opacity: 0; filter: blur(4px); }
.no-blur .ltr,
.no-blur .letters.is-in .ltr,
.no-blur .letters.is-out .ltr { filter: none; }

/* one phrase at a time in a slot whose width is tweened, so whatever follows
   travels with the new phrase instead of jumping to it */
.vow {
  display: inline-grid;
  position: relative;
  vertical-align: baseline;
  width: var(--vow-w, auto);
  transition: width .35s var(--ease);
  white-space: nowrap;
}
.is-measuring .vow { transition: none; }
.vow > .letters { grid-area: 1 / 1; }
.vow > .letters.is-out { position: absolute; top: 0; left: 0; }

/* ---------- the wordmark, and the way it collapses ---------- */

/* The mark IS the o. On scroll the letters retract into the mark. The letters
   travel through a window whose left edge sits against the mark, and a
   negative end margin grows in lockstep to take back the space they vacate. */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-inline-end: 0;
}
.wordmark-mark {
  flex: 0 0 auto;
  display: block;
  width: 22px;
  height: 22px;
  transition: transform .58s var(--ease);
}
.wordmark.is-mark .wordmark-mark { transform: scale(1.26); }
.frame:has([data-wordmark].is-mark):not(.has-cta) { padding-left: 16px; padding-right: 16px; }
/* 12 + 12 + 8 = the 32px the two 16px paddings gave up, so handing the pill in
   grows the bar by exactly the pill. It also evens the row: 9px of glass, the
   mark, 9px, the pill, 8px. */
.frame:has([data-wordmark].is-mark).has-cta { padding-left: 12px; }
.wordmark:not(.is-ready) .wordmark-mark,
.wordmark.is-still .wordmark-mark { transition: none; }
.wordmark.is-still .wordmark-mark { transform: none; }
.wordmark-rest {
  flex: 0 0 auto;
  display: inline-block;
  overflow: hidden;
  width: 19px;
  margin-left: -1px;
}
.wordmark-rest > span {
  display: inline-block;
  transform-origin: left center;
  transition: transform .58s var(--ease);
}
.wordmark.is-mark { margin-inline-end: -18px; }
.wordmark.is-mark .wordmark-rest > span { transform: translateX(-102%) scaleX(0.52); }
.wordmark:not(.is-ready),
.wordmark:not(.is-ready) .wordmark-rest > span,
.wordmark.is-still,
.wordmark.is-still .wordmark-rest > span { transition: none; }
.wordmark.is-still { margin-inline-end: 0; }
.wordmark.is-still .wordmark-rest > span { transform: none; }

/* ---------- the foot ---------- */

.legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: var(--micro);
  color: var(--ink-on-deep-2);
}
.legal a, .legal button {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.legal a:hover, .legal button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the phone ---------- */

@media (max-width: 760px) {
  .frame { top: 12px; height: 50px; padding: 0 18px; }
  .wordmark { font-size: 18px; }
  .pill { height: 36px; padding: 0 15px; font-size: 13.5px; }
  .frame.has-cta { padding-right: 7px; }
}

/* ---------- reduced motion ---------- */

/* Refused motion keeps the fade and drops the travel. Every timeline lands on
   its finished frame, which is the page's ordinary css. */
@media (prefers-reduced-motion: reduce) {
  .armed .rise.in, .armed .words.in .w { animation: fade-in .28s var(--ease) both; }
  .ltr { transform: none; filter: none; transition: opacity .18s var(--ease); transition-delay: 0ms; }
  .letters.is-in .ltr { transform: none; opacity: 0; filter: none; transition: none; }
  .letters.is-out .ltr { transform: none; opacity: 0; filter: none; transition: opacity .12s var(--ease); transition-delay: 0ms; }
  .vow { transition: width .16s var(--ease); }
  .pill, .go, .go svg, .capture, .frame, .frame-cta, .wordmark-mark { transition: none; }
  .wordmark.is-mark .wordmark-mark { transform: none; }
  .wordmark, .wordmark-rest > span { transition: none; }
  .wordmark.is-mark { margin-inline-end: 0; }
  .wordmark.is-mark .wordmark-rest > span { transform: none; }
  .capture.is-joined .joined { animation: none; }
}