/* Meet Elly, the thread: one focal point, centred under a centred heading, where Elly's method and her conversation are the same moving thing.
   Without JavaScript, or under reduced motion, this is the finished thread. meet-elly.js adds .is-armed and plays it once.
   The captain asked for 0.75x of the review page, which plays the first cut at 1.5x, so every duration here is 1.125x the first cut's pace. */
.meet .section-head { margin-left: auto; margin-right: auto; text-align: center; }
/* Her name in the heading takes her pink, as in the other headlines */
.meet h2 em { font-style: normal; color: var(--magenta); }
.meet [data-story] { position: relative; margin: 0 auto; }
/* The methodology, as a white chip under the subline with a small blue seal pressed on its left end; it is simply there, with no motion (the captain, 5 Oct) */
.meet .section-head > .verified { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 6px 18px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 8px 22px -14px rgba(39, 27, 54, .35); font: 700 15px/1.3 var(--font-heading); letter-spacing: -0.005em; color: var(--blue); text-align: left; }
.mini-seal { flex: none; width: 34px; height: 34px; color: var(--blue); transform: rotate(-10deg); }
.mini-seal svg { display: block; width: 100%; height: 100%; }

/* While the story measures its tallest state nothing may move */
.is-measuring, .is-measuring * { transition: none !important; animation: none !important; }

/* Elly's chat header, as in the live chat window */
.chat-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line-on-dark); }
.chat-head .avatar { width: 32px; height: 32px; }
.chat-who b { display: block; font-family: var(--font-heading); font-size: 15px; font-weight: 800; line-height: 1; color: #fff; }
.chat-who span { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1; color: var(--muted-on-dark); }
.chat-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-heading); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.chat-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
/* The live dot pulses while the conversation plays and holds still once it has ended */
.is-armed .chat-live i { animation: chat-live 1422ms ease-in-out infinite; }
@keyframes chat-live { 50% { opacity: .3; } }

/* Bubbles fade in once the typing dots make way, and her typing dots keep the thread's pace */
.thread .bubble { transition: opacity 222ms; }
.thread .turn.elly .bubble b { color: var(--magenta-deep); }
.thread .turn.person .bubble b { color: var(--blue); }
.thread .typing i { animation-duration: 889ms; }
.thread .typing i:nth-child(2) { animation-delay: 133ms; }
.thread .typing i:nth-child(3) { animation-delay: 267ms; }

/* One chat window where each of Elly's messages carries the step it makes: the magenta thread joins her steps, each exchange folds into what they said
   once she moves on, and the lines where a survey and a simple AI chatbot stop cut across the chat as she passes them */
.thread { max-width: 820px; }
.thread-app { border-radius: 22px; background: var(--aubergine); box-shadow: 0 0 0 6px #DFD6EA, 0 40px 80px -44px rgba(39, 27, 54, .55); overflow: hidden; }

.thread-body { display: flex; flex-direction: column; padding: 24px 30px 26px 22px; }
.thread .beat, .thread .stop { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 16px; }
.thread .beat { padding-bottom: 14px; }
.thread .beat.root { padding-bottom: 0; }

/* The thread: a line from each step she has passed down to the next, through the lines where others stop */
.thread .beat:not(.root)::before, .thread .stop::before { content: ""; position: absolute; z-index: 1; left: 18px; width: 2px; top: 19px; bottom: 0; border-radius: 1px; background: var(--magenta-hot); transform-origin: top; transform: scaleY(0); transition: transform 355ms cubic-bezier(.2, .8, .2, 1); }
.thread .stop::before { top: 0; bottom: -14px; }
.thread .beat.is-past::before, .thread .stop.is-passed::before { transform: none; }

.thread .node { position: relative; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--magenta-hot); background: var(--aubergine); color: var(--magenta-hot); font: 800 16px/1 var(--font-heading); transition: background-color 267ms, color 267ms, box-shadow 267ms; }
.thread .node .icon { width: 18px; height: 18px; }
.thread .beat.is-now .node { background: var(--magenta); border-color: var(--magenta); color: #fff; box-shadow: 0 0 0 7px rgba(226, 51, 107, .22); }

.thread .beat-main { min-width: 0; }
.thread .beat-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 38px; }
.thread .beat-top b { font: 800 19px/1.25 var(--font-heading); letter-spacing: -0.01em; color: #fff; transition: color 267ms; }
.thread .beat.is-now .beat-top b { color: var(--magenta-hot); }
/* What they said, in their own bubble, once Elly has moved past it */
.thread .said { display: none; max-width: 100%; padding: 4px 11px 3px; border-radius: 10px; border-top-right-radius: 4px; background: #fff; color: var(--blue); font-size: 14.5px; font-weight: 600; line-height: 1.35; transition: opacity 311ms 133ms, transform 311ms 133ms cubic-bezier(.2, .8, .2, 1); }
.thread .beat.is-past .said { display: inline-block; }
@starting-style { .thread .beat.is-past .said { opacity: 0; transform: translateX(-6px); } }

/* What folds away once Elly moves on: the step's explanation and the exchange itself */
.thread .fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 400ms cubic-bezier(.2, .8, .2, 1), opacity 267ms; }
.thread .fold > div { min-height: 0; overflow: hidden; }
.thread .beat.is-past .fold { grid-template-rows: 0fr; opacity: 0; }
.thread .beat-desc p { padding-top: 1px; font-size: 15px; line-height: 1.45; color: var(--muted-on-dark); }
.thread .beat-full .turn:first-child { margin-top: 14px; }
.thread .beat-full .turn + .turn { margin-top: 10px; }
.thread .beat-full .bubble { max-width: 88%; font-size: 15.5px; }

/* The line where another tool stops; the thread runs on through it */
.thread .stop { align-items: center; min-height: 30px; margin-bottom: 14px; }
.thread .stop::after { content: ""; position: absolute; left: -8px; right: 0; top: 50%; border-top: 2px dashed rgba(255, 255, 255, .22); }
.thread .stop span { position: relative; z-index: 1; grid-column: 1 / -1; justify-self: end; padding-left: 12px; background: var(--aubergine); font: 700 11.5px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--faint-on-dark); }

/* The root cause, in Elly's magenta: the one thing to take away */
.thread .root-card { padding: 14px 18px 16px; border-radius: 14px; background: rgba(226, 51, 107, .16); border: 1px solid rgba(226, 51, 107, .55); box-shadow: 0 18px 40px -24px rgba(226, 51, 107, .7); }
.thread .root-card b { display: block; font: 700 12px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-hot); }
.thread .root-card span { display: block; margin-top: 6px; font: 800 23px/1.25 var(--font-heading); letter-spacing: -0.01em; color: #fff; text-wrap: balance; }

/* Playing: steps not reached yet are not there, the current one arrives, and a message shows once Elly types it */
.thread.is-armed .beat.is-future, .thread.is-armed .stop:not(.is-on) { display: none; }
.thread.is-armed .beat.is-now, .thread.is-armed .stop.is-on { transition: opacity 311ms, transform 400ms cubic-bezier(.2, .8, .2, 1); }
@starting-style { .thread.is-armed .beat.is-now, .thread.is-armed .stop.is-on { opacity: 0; transform: translateY(10px); } }
.thread.is-armed .beat.root.is-now .root-card { transition: transform 445ms cubic-bezier(.3, 1.4, .5, 1), box-shadow 533ms; }
@starting-style { .thread.is-armed .beat.root.is-now .root-card { transform: scale(.94); box-shadow: 0 0 0 0 rgba(226, 51, 107, 0); } }
.thread.is-armed .beat-full .turn:not(.is-on, .is-typing) { display: none; }
.thread.is-armed .beat-full .turn { transition: opacity 267ms, transform 355ms cubic-bezier(.2, .8, .2, 1); }
@starting-style { .thread.is-armed .beat-full .turn { opacity: 0; transform: translateY(8px); } }

/* On desktop the window spans the full content column, like the ways to take part below it, and its type grows to use the room */
@media (min-width: 721px) {
  .thread { max-width: none; }
  .thread .chat-head { gap: 12px; padding: 16px 26px; }
  .thread .chat-head .avatar { width: 40px; height: 40px; }
  .thread .chat-who b { font-size: 19px; }
  .thread .chat-who span { margin-top: 6px; font-size: 15px; }
  .thread .chat-live { gap: 8px; font-size: 14px; }
  .thread .chat-live i { width: 9px; height: 9px; }
  .thread-body { padding: 32px 40px 34px 30px; }
  .thread .beat, .thread .stop { grid-template-columns: 46px minmax(0, 1fr); column-gap: 20px; }
  .thread .beat { padding-bottom: 18px; }
  .thread .beat:not(.root)::before, .thread .stop::before { left: 22px; top: 23px; }
  .thread .stop::before { top: 0; bottom: -18px; }
  .thread .node { width: 46px; height: 46px; font-size: 19px; }
  .thread .node .icon { width: 22px; height: 22px; }
  .thread .beat.is-now .node { box-shadow: 0 0 0 8px rgba(226, 51, 107, .22); }
  .thread .beat-top { min-height: 46px; gap: 6px 16px; }
  .thread .beat-top b { font-size: 26px; }
  .thread .said { padding: 5px 14px 4px; border-radius: 12px; border-top-right-radius: 4px; font-size: 18px; }
  .thread .beat-desc p { font-size: 18.5px; }
  .thread .beat-full .turn:first-child { margin-top: 16px; }
  .thread .beat-full .turn + .turn { margin-top: 12px; }
  .thread .turn { gap: 12px; }
  .thread .turn .avatar { width: 38px; height: 38px; }
  .thread .turn .avatar.person .icon { width: 17px; height: 17px; }
  .thread .beat-full .bubble { max-width: 76%; padding: 13px 18px; border-radius: 16px; font-size: 18.5px; }
  .thread .turn.elly .bubble { border-top-left-radius: 4px; }
  .thread .turn.person .bubble { border-top-right-radius: 4px; }
  .thread .turn.is-typing .typing { left: 50px; gap: 5px; padding: 23px 18px; border-radius: 16px; border-top-left-radius: 4px; }
  .thread .typing i { width: 7px; height: 7px; }
  .thread .stop { min-height: 36px; margin-bottom: 18px; }
  .thread .stop span { padding-left: 16px; font-size: 14.5px; }
  .thread .root-card { padding: 18px 24px 20px; border-radius: 16px; }
  .thread .root-card b { font-size: 14.5px; }
  .thread .root-card span { margin-top: 8px; font-size: 31px; }
}

@media (max-width: 720px) {
  /* On a phone the line breaks after verified, so the chip stays narrow */
  .meet .section-head > .verified { margin-top: 18px; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 22px; font-size: 13.5px; }
  .verified-text > span { display: block; }
  .mini-seal { width: 30px; height: 30px; }
  .thread-app { border-radius: 18px; box-shadow: 0 0 0 4px #DFD6EA, 0 30px 60px -40px rgba(39, 27, 54, .55); }
  .thread .chat-head { padding: 11px 14px; }
  .thread-body { padding: 18px 14px 20px 12px; }
  .thread .beat, .thread .stop { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; }
  .thread .beat { padding-bottom: 12px; }
  .thread .node { width: 30px; height: 30px; font-size: 14px; }
  .thread .node .icon { width: 15px; height: 15px; }
  .thread .beat.is-now .node { box-shadow: 0 0 0 5px rgba(226, 51, 107, .22); }
  .thread .beat:not(.root)::before, .thread .stop::before { left: 14px; top: 15px; }
  .thread .stop::before { top: 0; bottom: -12px; }
  .thread .beat-top { min-height: 30px; gap: 4px 10px; }
  .thread .beat-top b { font-size: 17px; }
  .thread .said { font-size: 13.5px; }
  .thread .beat-desc p { font-size: 14px; }
  .thread .beat-full .turn:first-child { margin-top: 10px; }
  .thread .beat-full .bubble { max-width: 90%; font-size: 14.5px; }
  .thread .stop { margin-bottom: 12px; }
  .thread .stop span { font-size: 10.5px; }
  .thread .root-card { padding: 12px 14px 14px; }
  .thread .root-card span { font-size: 19px; }
}

/* The narrowest phones keep the thread clear: the lines where others stop take smaller type */
@media (max-width: 340px) {
  .thread .stop span { font-size: 9.5px; letter-spacing: .08em; }
}