:root {
  /* Colour */
  --color-ground: #FFFFFF;
  --color-pill: #F0F0F0;
  --color-pill-hover: #E6E6E4;
  --color-muted: #888888;
  --color-body: #2E2E2E;
  --color-accent: #FF4F00;

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --text-nav: 13px;
  --text-wordmark: clamp(22px, 2vw, 28px);
  --text-thesis: clamp(26px, 2.6vw, 32px);
  --leading-thesis: clamp(34px, 3.4vw, 42px);
  --text-h1-page: clamp(32px, 3.6vw, 40px);
  --text-h2: 26px;
  --text-body: clamp(14px, 1.1vw, 15px);
  --leading-body: clamp(25px, 2.1vw, 27px);
  --text-footer: 13px;

  /* Layout */
  --column: 720px;
  --measure: 672px;
  --gutter: 24px;
}

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

/* Several components set their own display, which would outrank the UA rule */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--color-ground);
  color: var(--color-body);
  font-family: var(--font-sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

/* Shared centred column — the whole page hangs off this one measure */
.column {
  width: 100%;
  max-width: var(--column);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Loading banner ─────────────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  will-change: transform;
  animation: loader-up 900ms cubic-bezier(0.76, 0, 0.24, 1) 1240ms forwards;
}

/* already seen this visit — never render it again */
.loader-seen .loader {
  display: none;
}

.loader__mark {
  display: flex;
  align-items: center;
  color: #FFFFFF;
}

.loader__mark svg {
  width: auto;
  height: 44px;
  fill: currentColor;
  transform-origin: center;
  animation: bang 460ms cubic-bezier(0.2, 1, 0.3, 1) 60ms both;
}

/* each word lands as its own hit */
.loader__word {
  display: inline-block;
  padding-left: 4px;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  transform-origin: left center;
  animation: hit 300ms cubic-bezier(0.2, 1.4, 0.4, 1) 360ms both;
}

.loader__word--late {
  padding-left: 0;
  animation-delay: 620ms;
}

@keyframes bang {
  0%   { opacity: 0; transform: scale(0.25) rotate(-25deg); }
  55%  { opacity: 1; transform: scale(1.22) rotate(4deg); }
  78%  { transform: scale(0.94) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes hit {
  0%   { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes loader-up {
  to { transform: translateY(-100%); visibility: hidden; }
}

/* ── 01 Nav ─────────────────────────────────────────── */
.nav {
  padding-block: 36px;
}

.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.wordmark svg {
  width: auto;
  height: calc(var(--text-wordmark) * 1.25);
  flex-shrink: 0;
}

.wordmark span {
  font-size: var(--text-wordmark);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Hamburger — bare bars, no pill behind them. Mobile only */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--color-body);
  cursor: pointer;
}

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

/* Three bars: the element is the middle one, pseudo-elements the outer two */
.nav__bars {
  position: relative;
}

.nav__bars,
.nav__bars::before,
.nav__bars::after {
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 200ms ease, background-color 120ms ease;
}

.nav__bars::before,
.nav__bars::after {
  content: '';
  position: absolute;
}

.nav__bars::before {
  transform: translateY(-5px);
}

.nav__bars::after {
  transform: translateY(5px);
}

/* Open state: middle bar goes transparent, outer two cross */
[data-open] .nav__bars {
  background: transparent;
}

[data-open] .nav__bars::before {
  transform: rotate(45deg);
}

[data-open] .nav__bars::after {
  transform: rotate(-45deg);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--color-pill);
  font-size: var(--text-nav);
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  transition: background-color 120ms ease;
}

.nav__link:hover {
  background: var(--color-pill-hover);
}

/* Contact is a button, so it needs the type defaults reset back to the pill */
.nav__contact {
  border: 0;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}

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

/* Products menu — a card that opens on hover, or on click for touch and keyboard */
.nav__menu {
  position: relative;
}

.nav__menu-trigger {
  border: 0;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}

.nav__menu-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.nav__menu.is-open .nav__menu-trigger {
  background: var(--color-pill-hover);
}

/* Centred under the pill; fades and settles in, and can't be tabbed into while closed */
.nav__panel {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 15;
  width: 280px;
  padding: 6px;
  background: var(--color-ground);
  border: 1px solid rgba(46, 46, 46, 0.1);
  border-radius: 14px;
  box-shadow: 0 16px 40px -18px rgba(46, 46, 46, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

.nav__menu.is-open .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .nav__panel {
    transition-duration: 0s;
  }
}

/* Invisible bridge over the gap, so the hover survives the crossing */
.nav__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

.nav__product {
  display: block;
  padding: 6px;
}

/* The whole card greys on hover, and pulses grey once when Products is
   clicked while it is already up, so the click registered */
.nav__panel {
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms, background-color 160ms ease;
}

.nav__panel:hover {
  background: var(--color-pill);
}

.nav__panel.is-nudged {
  animation: nav-nudge 700ms ease;
}

@keyframes nav-nudge {
  30% { background: var(--color-pill); }
  100% { background: var(--color-ground); }
}

.nav__product-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  /* Shortlist's hero sky, at card size */
  background: #1A1A1A url("/products-sky.svg") center / cover no-repeat;
}

/* The auroras, on their own layer so they can come in with the name */
.nav__product-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/products-aurora.svg") center / cover no-repeat;
  opacity: 0;
  transition: opacity 0s linear 160ms;
}

.nav__menu.is-open .nav__product-media::before {
  opacity: 1;
  transition: opacity 900ms ease 1100ms;
}

/* The lockup: the mark alone first, then it slides aside and the name comes in.
   The name keeps its full width throughout (102px of Jersey 10 at 34px), so the
   mark starts pushed right by half the name and its gap, and slides home. */
.nav__product-logo {
  --word: 102px;
  --gap: 8px;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.nav__product-logo img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  transform: translateX(calc((var(--word) + var(--gap)) / 2));
  /* on close, hold until the panel has faded, then snap back for next time */
  transition: transform 0s linear 160ms;
}

.nav__menu.is-open .nav__product-logo img {
  transform: none;
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 600ms;
}

.nav__product-wordmark {
  width: var(--word);
  white-space: nowrap;
  /* Shortlist's own wordmark: Jersey 10, sized off the mark the way its nav does
     (a 28px star wants a ~34px face). One weight only — never ask it for bold. */
  font-family: 'Jersey 10', system-ui, sans-serif;
  font-size: 34px;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
  line-height: 1;
  color: #FFFFFF;
}

/* The name fades up from just below once the mark has settled, and the auroras
   come up behind it on the same cue */
.nav__product-wordmark {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0s linear 160ms, transform 0s linear 160ms;
}

.nav__menu.is-open .nav__product-wordmark {
  opacity: 1;
  transform: none;
  transition: opacity 800ms ease 1100ms, transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1) 1100ms;
}

@media (prefers-reduced-motion: reduce) {
  .nav__product-logo img,
  .nav__product-wordmark,
  .nav__product-media::before {
    transition: none;
  }
}

.nav__product-text {
  display: block;
  padding: 10px 6px 6px;
}

.nav__product-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.nav__product-blurb {
  display: block;
  margin-top: 2px;
  font-size: var(--text-nav);
  line-height: 18px;
  color: var(--color-muted);
}

/* Address tip — fixed, so the mobile menu's overflow can't clip it */
.nav__tip {
  position: fixed;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 8px;
  background: var(--color-body);
  color: var(--color-ground);
  font-size: var(--text-nav);
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}

.nav__tip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* Boxicons bx-copy and bx-check, stacked — one is shown at a time */
.nav__tip-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: currentColor;
}

/* The two glyphs sit on top of each other and trade places: the copy mark
   shrinks away, the tick pops in a beat behind it */
.nav__tip-icon path {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 130ms ease, transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1.45);
}

.nav__tip-done {
  opacity: 0;
  transform: scale(0.3) rotate(-12deg);
}

.nav__tip.is-copied .nav__tip-copy {
  opacity: 0;
  transform: scale(0.5) rotate(6deg);
}

.nav__tip.is-copied .nav__tip-done {
  opacity: 1;
  transform: none;
  transition-delay: 70ms;
}

/* Screen-reader-only announcements; never shown */
.nav__say {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .nav__tip {
    transform: none;
    transition: none;
  }

  .nav__tip-icon path {
    transition: opacity 100ms ease;
    transform: none;
  }

  .nav__tip.is-copied .nav__tip-copy,
  .nav__tip.is-copied .nav__tip-done {
    transform: none;
  }
}

/* ── 02 Thesis ──────────────────────────────────────── */
.thesis {
  padding-top: clamp(56px, 8vw, 96px);
  /* the narrative brings its own top padding — this widens the gap under the headline */
  padding-bottom: clamp(20px, 2.4vw, 28px);
}

h1 {
  max-width: var(--column);
  font-size: var(--text-thesis);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: var(--leading-thesis);
}

/* Page title on interior pages — a single word can carry more size
   than Home's full-sentence headline */
.page-title {
  padding-top: clamp(56px, 8vw, 96px);
}

.page-title h1 {
  font-size: var(--text-h1-page);
  line-height: 1.15;
  padding-bottom: clamp(16px, 2vw, 28px);
}

/* ── 03 Narrative ───────────────────────────────────── */
.narrative {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(72px, 9vw, 112px);
}

.narrative .column {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* Prose paragraphs, wherever they appear */
p {
  max-width: var(--measure);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

/* ── Section labels ─────────────────────────────────── */
h2,
.section-label {
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 34px;
}

/* A heading belongs to the paragraph under it — pull it in from the 26px gap */
.column > h2 {
  margin-bottom: -8px;
}

.examples .column > h2 {
  margin-bottom: -28px;
}

/* Prose section with a heading — used for each labelled block */
.section-block,
.examples {
  padding-top: 20px;
  /* the next section brings its own top padding — this only tops it up */
  padding-bottom: clamp(8px, 2vw, 24px);
}

.section-block .column {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* ── Examples (Work) ────────────────────────────────── */
.examples .column {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 56px);
}

/* Consecutive intro paragraphs keep the 26px prose gap, not the block gap */
.examples .column > p + p {
  margin-top: calc(26px - clamp(40px, 5vw, 56px));
}

.example {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Sub-heads read as bold body text, but stay headings for structure */
.example h3 {
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 22px;
  margin-bottom: 0;
}

/* Placeholder slab — the isometric diagrams drop in here */
.diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  min-height: 160px;
  padding: 24px;
  border-radius: 12px;
  background: #F7F7F7;
  border: 1px solid rgba(46, 46, 46, 0.08);
  text-align: center;
}

/* ── Trust bar ──────────────────────────────────────── */
.trust {
  padding-bottom: clamp(72px, 9vw, 112px);
}

.trust__logos {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* The SVG marks are drawn white, so they are inverted onto the light ground.
   heidi.png is already black and only needs the fade. */
.trust__logos img {
  height: 26px;
  width: auto;
  opacity: 0.28;
  filter: invert(1);
}

.trust__logos img[src$=".png"] {
  filter: none;
}

/* A wide all-caps wordmark in a heavy weight reads larger and darker than
   the others at matched settings, so it is pulled back on both */
.trust__logos img[src$="blackbird.png"] {
  height: 18px;
  opacity: 0.2;
}

/* Home carries a single diagram between the narrative and the footer */
.diagram-band {
  padding-top: clamp(32px, 4vw, 48px);
}

.diagram--tall {
  min-height: 280px;
}

.diagram__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
  color: #555555;
}

.diagram__note {
  font-size: 13px;
  line-height: 18px;
  color: #8A8A8A;
}

/* ── Team (About) ───────────────────────────────────── */
.team {
  padding-top: clamp(16px, 2vw, 24px);
  padding-bottom: clamp(72px, 9vw, 112px);
}

.team__row {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 56px);
}

/* Portrait in a fixed left lane so every row shares one text edge */
.team figure {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  align-items: start;
  margin: 0;
}

/* Same surface as the Work-page diagram slabs, so a missing photo still reads */
.team__portrait {
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  background: #F7F7F7;
  border: 1px solid rgba(46, 46, 46, 0.08);
  overflow: hidden;
}

.team__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team figcaption {
  font-size: var(--text-body);
  line-height: 22px;
}

.team__name {
  font-weight: 600;
}

.team__role {
  display: block;
  margin-top: 2px;
  color: var(--color-muted);
}

.team__linkedin {
  display: inline-flex;
  margin-top: 14px;
  color: var(--color-muted);
  transition: color 120ms ease;
}

.team__linkedin:hover {
  color: var(--color-body);
}

.team__linkedin svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.team__bio a,
.section-block p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(136, 136, 136, 0.45);
  text-underline-offset: 2px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

.team__bio a:hover,
.section-block p a:hover {
  color: var(--color-body);
  text-decoration-color: currentColor;
}

.team__bio {
  margin-top: 14px;
  max-width: 46em;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-muted);
}

/* Whatever ends the page keeps the same clearance above the footer */
main > :last-child {
  padding-bottom: clamp(72px, 9vw, 112px);
}

/* ── 04 Footer ──────────────────────────────────────── */
.footer {
  margin-top: auto;
  padding-bottom: 40px;
}

.footer__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.footer__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--text-footer);
  line-height: 22px;
  color: var(--color-muted);
}

.footer__group--legal {
  align-items: flex-end;
  text-align: right;
}

.footer a {
  transition: color 120ms ease;
}

.footer a:hover {
  color: var(--color-body);
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --text-thesis: 28px;
    --leading-thesis: 36px;
    --text-body: 15px;
    --leading-body: 27px;
  }

  .nav {
    padding-block: 24px;
  }

  .nav__toggle {
    display: inline-flex;
  }

  /* Menu drops below the row; its own padding supplies the spacing */
  .nav__row {
    row-gap: 0;
  }

  .nav__links {
    flex-basis: 100%;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 240ms ease;
  }

  .nav__links > .nav__inner {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    transition: visibility 0s linear 240ms;
  }

  .nav__row[data-open] .nav__links {
    grid-template-rows: 1fr;
  }

  .nav__row[data-open] .nav__links > .nav__inner {
    visibility: visible;
    transition-delay: 0s;
  }

  .trust__logos {
    gap: 28px;
  }

  .trust__logos img {
    height: 22px;
  }

  /* Pills become full-width menu rows */
  .nav__link {
    justify-content: flex-start;
    padding: 11px 14px;
  }

  .nav__inner > :first-child {
    margin-top: 16px;
  }

  /* Products opens in place, as a row of the menu, rather than floating */
  .nav__menu {
    display: flex;
    flex-direction: column;
  }

  .nav__menu-trigger {
    justify-content: space-between;
  }

  .nav__panel,
  .nav__menu.is-open .nav__panel {
    display: none;
    position: static;
    width: auto;
    margin-top: 8px;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .nav__menu.is-open .nav__panel {
    display: block;
  }

  .nav__panel::before {
    display: none;
  }

  /* In the menu the slot sits beside the words, and the lockup shows whole */
  .nav__product {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .nav__product-media {
    width: 112px;
    flex-shrink: 0;
  }

  .nav__product-media::before {
    opacity: 1;
    transition: none;
  }

  .nav__product-logo {
    --gap: 6px;
  }

  .nav__product-logo img,
  .nav__product-wordmark,
  .nav__menu.is-open .nav__product-logo img,
  .nav__menu.is-open .nav__product-wordmark {
    width: auto;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nav__product-logo img {
    width: 20px;
    height: 20px;
  }

  .nav__product-wordmark {
    font-size: 24px;
  }

  .nav__product-text {
    padding: 0;
  }

  /* No JS: leave the menu open rather than trapping the links */
  .no-js .nav__links {
    grid-template-rows: 1fr;
  }

  .no-js .nav__links > .nav__inner {
    visibility: visible;
  }

  /* Phone: portrait sits above its bio */
  .team figure {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .team__portrait {
    max-width: 160px;
  }

  .footer__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footer__group--legal {
    align-items: flex-start;
    text-align: left;
  }
}

/* No JS: the toggle can't work, so just show the links */
.no-js .nav__toggle {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .loader { animation-delay: 0ms; animation-duration: 1ms; }
  .loader__mark svg, .loader__word { animation: none; }

  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Live diagrams — inline SVG in place of the placeholder slab */
.diagram--live {
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
  border-radius: 0;
  display: block;
  margin-top: 36px;
}

.lead-list-diagram,
.recon-diagram {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Cards stay hidden until the diagram scrolls into view, then drop in left to right */
.lead-list-diagram .card,
.recon-diagram .card {
  opacity: 0;
  transform: translateY(-36px);
}

.lead-list-diagram.is-in-view .card,
.recon-diagram.is-in-view .card {
  animation: card-drop 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

/* The first card is up from the start, so the row never reads as empty */
.lead-list-diagram .card--ready,
.lead-list-diagram.is-in-view .card--ready,
.recon-diagram .card--ready,
.recon-diagram.is-in-view .card--ready {
  opacity: 1;
  transform: none;
  animation: none;
}

@keyframes card-drop {
  to { opacity: 1; transform: translateY(0); }
}

/* Reconciliation diagram: the flow lines draw on between tiles and the
   receipts, coin and brain float up once the sources are in */
.recon-diagram .flow {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.recon-diagram.is-in-view .flow {
  animation: line-draw 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.recon-diagram .float {
  opacity: 0;
  transform: translateY(10px);
}

.recon-diagram.is-in-view .float {
  animation: float-in 700ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes line-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes float-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .lead-list-diagram .card, .recon-diagram .card { animation: none; opacity: 1; transform: none; }
  .recon-diagram .flow { animation: none; stroke-dashoffset: 0; }
  .recon-diagram .float { animation: none; opacity: 1; transform: none; }
}