/* Traceability, through the transcripts: all the conversations flow into one big insight, then one beam sweeps down a stack of transcripts.
   Every quote it passes lights up where it was said; the twelve it finds nowhere drop out below as hallucinations, removed.
   The section head says the message once; the stage keeps to one line of text at a time: the conversations, the insight, the check, the result.
   On the captain's soft white, between the night of Pricing and the night of Quick for you.
   Without JavaScript, or under reduced motion, this is the finished picture. traceability.js adds .is-armed to hide the parts, then plays the story. */
.traceability-section {
  background: var(--paper-soft);
  --found: var(--mint);
  --fake: var(--magenta-hot);
  /* One green for the beam, the quotes it finds and the count, and pink only for the hallucinations, so the section keeps to two colours; their deep shades where they are text on the light page */
  --trace: var(--mint);
  --trace-ink: var(--mint-deep);
  --fake-ink: var(--magenta-deep);
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  /* Every duration here is stretched by this, to play at 1.125x; traceability.js stretches its timings by the same */
  --pace: .8889;
}
.check-stage { position: relative; }
.check-stage > .example-tag { position: absolute; top: 0; right: 0; }

/* All the conversations: a count, and a field of chat bubbles, some the interviewer's and some the person's */
.check-conversations { max-width: 780px; margin: 0 auto; text-align: center; transition: opacity calc(.4s * var(--pace)) ease; }
.check-conversations-count { display: flex; justify-content: center; align-items: baseline; gap: 12px; font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--muted); }
.check-conversations-count b { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.check-conversations-field { --w: 28px; --h: 18px; position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 9px; height: calc(var(--h) * 3 + 20px + 6px); margin-top: 16px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #0A070E 12%, #0A070E 88%, transparent); mask-image: linear-gradient(90deg, transparent, #0A070E 12%, #0A070E 88%, transparent); }
/* A bubble: two lines of text, and a tail on the speaker's side */
.check-conversations-field i { --c: #929699; position: relative; flex: none; width: var(--w); height: var(--h); border-radius: 6px; background: linear-gradient(#fff, #fff) 6px 5px / 15px 2px no-repeat, linear-gradient(#fff, #fff) 6px 10px / 10px 2px no-repeat, var(--c); transition: opacity calc(.15s * var(--pace)) ease, transform calc(.225s * var(--pace)) cubic-bezier(.34, 1.56, .64, 1), background-color calc(.3s * var(--pace)) ease; }
.check-conversations-field i::after { content: ""; position: absolute; left: 5px; bottom: -5px; border: 3px solid transparent; border-top-color: var(--c); border-left-color: var(--c); }
.check-conversations-field i.b { --c: #C6CBCB; background-position: right 6px top 5px, right 6px top 10px, 0 0; }
.check-conversations-field i.b::after { left: auto; right: 5px; border-left-color: transparent; border-right-color: var(--c); }
.check-conversations-field i.is-sent { --c: var(--trace); }
/* The dots that fly into the insight; made and removed by the script */
.check-sparks { position: absolute; inset: 0; pointer-events: none; }
.check-sparks i { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--trace); }

/* The insight: the biggest thing on the stage */
.check-claim { max-width: 940px; margin: 30px auto 0; text-align: center; transition: opacity calc(.5s * var(--pace)) ease, transform calc(.6s * var(--pace)) cubic-bezier(.22, 1, .36, 1); }
.check-claim-chip { display: inline-block; padding: 5px 12px 4px; border-radius: 999px; background: var(--magenta); font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.check-claim-text { margin-top: 14px; font-family: var(--font-heading); font-size: clamp(32px, 3.8vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }

/* The check trace: a glimpse of the machine at work, the source, the quote and its characters matched; it is not meant to be read */
.check-trace { max-width: 700px; margin: 18px auto 0; padding: 10px 14px; border-radius: 10px; background: rgba(39, 27, 54, .035); box-shadow: inset 0 0 0 1px rgba(39, 27, 54, .08); font-family: var(--mono); font-size: 12px; line-height: 1.6; color: #929699; transition: opacity calc(.4s * var(--pace)) ease; }
.check-trace ol { min-height: calc(3 * 1.6em); }
.check-trace template { display: none; }
.check-trace li { display: flex; gap: 12px; white-space: nowrap; }
.check-trace li:nth-last-child(3) { opacity: .45; }
.check-trace li:nth-last-child(2) { opacity: .7; }
.check-trace span { flex: none; }
.check-trace q { quotes: "“" "”"; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
/* Each language's own quote marks, as its quotes in the cards around it */
.check-trace q:lang(de) { quotes: "„" "“"; }
.check-trace q:lang(sv) { quotes: "”" "”"; }
.check-trace q:lang(fr) { quotes: "«\202F" "\202F»"; }
.check-trace b { flex: none; font-weight: 700; color: var(--trace-ink); }
.check-trace .no q { text-decoration: line-through 1px var(--fake-ink); }
.check-trace .no b { color: var(--fake-ink); }

/* The result: what it means, as its own headline */
.check-result { margin-top: 38px; text-align: center; transition: opacity calc(.5s * var(--pace)) ease, transform calc(.6s * var(--pace)) cubic-bezier(.22, 1, .36, 1); }
/* The promise rises in once the counts are done; then Reliable and consistent are painted, the and between them left plain */
.check-result-head { font-family: var(--font-heading); font-size: clamp(32px, 3.2vw, 46px); font-weight: 800; line-height: 1.26; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
/* Each word on the site's brush in brand blue: --p runs 0 to 1 as it paints, and the word turns from dark purple to white as the stroke passes */
.check-result .brush { --p: 1; padding-inline: .16em; margin-inline: -.16em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4 240 24' preserveAspectRatio='none'%3E%3Cpath fill='%2326547C' d='M7 9C46 5 104 8 161 5s65 1 74 3c3 3 0 6 2 9s-1 7-4 9c-52 2-112-1-173 1-24 1-42 1-54-1-3-3 0-6-2-10s1-6 3-7Z'/%3E%3C/svg%3E") 0 58% / calc(var(--p) * 100%) 1.22em no-repeat; }
.check-result .brush > span { padding-inline: .16em; margin-inline: -.16em; color: transparent; background: linear-gradient(90deg, #fff calc(var(--p) * 100%), var(--ink) 0); -webkit-background-clip: text; background-clip: text; }
/* Chinese has no spaces around the painted words, so the stroke takes its own room and leaves the character between them clear */
.check-result .brush:lang(zh) { margin-inline: 0; }

/* The story */
.check.is-armed:not(.is-conversations) .check-conversations { opacity: 0; }
.check.is-armed .check-conversations-field i:not(.on) { opacity: 0; transform: scale(.4); transition-delay: 0s; }
.check.is-armed .check-conversations-field i.on { transition-delay: calc(var(--d, 0) * 1ms * var(--pace)); }
.check.is-armed:not(.is-claim) .check-claim { opacity: 0; transform: translateY(14px) scale(.97); }
.check.is-armed:not(.is-check) .check-trace { opacity: 0; }
.check.is-armed:not(.is-result) .check-result { opacity: 0; transform: translateY(10px); }
.check-result-head { transition: opacity calc(.3s * var(--pace)) ease, transform calc(.4s * var(--pace)) cubic-bezier(.22, 1, .36, 1); }
.check.is-armed:not(.is-promise) .check-result-head { opacity: 0; transform: translateY(10px); }
.check .example-tag { transition: opacity calc(.4s * var(--pace)) ease; }
.check.is-armed:not(.is-result) .check-stage > .example-tag { opacity: 0; }

/* On a phone the insight and the result's headline stay well under the section's 31 px heading, at 25 px, the conversations' count at 24 px and the result number at 28 px */
@media (max-width: 720px) {
  .check-stage > .example-tag { position: static; display: table; margin: 0 auto 14px; }
  .check-conversations-count { gap: 8px; font-size: 15px; }
  .check-conversations-count b { font-size: 24px; }
  .check-conversations-field { --w: 22px; --h: 15px; gap: 8px 7px; height: calc(var(--h) * 3 + 16px + 5px); margin-top: 10px; }
  .check-conversations-field i { border-radius: 5px; background-position: 5px 4px, 5px 8px, 0 0; background-size: 11px 2px, 7px 2px, auto; }
  .check-conversations-field i.b { background-position: right 5px top 4px, right 5px top 8px, 0 0; }
  .check-conversations-field i::after { left: 4px; bottom: -4px; border-width: 2.5px; }
  .check-conversations-field i.b::after { right: 4px; }
  .check-claim { margin-top: 20px; }
  .check-claim-chip { padding: 4px 10px 3px; font-size: 11px; }
  .check-claim-text { margin-top: 10px; font-size: 25px; line-height: 1.18; letter-spacing: -0.015em; }
  .check-trace { margin-top: 14px; padding: 8px 10px; font-size: 11px; }
  .check-trace li { gap: 8px; }
  .check-trace span { display: none; }
  .check-result { margin-top: 26px; }
  .check-result-head { font-size: 26px; line-height: 1.34; letter-spacing: -0.015em; }
}

/* The transcripts: the beam sweeps down them, and the finished picture is the scan at its end, every quote lit and the twelve hallucinations set aside */
.scan { max-width: 780px; margin: 40px auto 0; }
.scan-pages { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding: 0 12px 12px 0; }
/* One white transcript on top of a stack of them */
.scan-page { padding: 20px 20px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(39, 27, 54, .08), 6px 6px 0 -1px #E3E5E4, 12px 12px 0 -2px #F1F3F4; }
.scan-page p { display: flex; gap: 5px; width: var(--w); height: 7px; margin-bottom: 10px; }
.scan-page span, .scan-page mark { border-radius: 4px; background: rgba(39, 27, 54, .1); }
.scan-page span { flex: 1; }
.scan-page mark { background: var(--found); box-shadow: 0 0 10px rgba(6, 214, 160, .35); }
/* The beam: seen only while it sweeps */
.scan-beam { position: absolute; left: -10px; right: 2px; top: 0; height: 2px; border-radius: 2px; background: var(--trace); box-shadow: 0 0 14px 2px rgba(6, 214, 160, .55); opacity: 0; transition: background-color calc(.15s * var(--pace)) ease, box-shadow calc(.15s * var(--pace)) ease, opacity calc(.3s * var(--pace)) ease; }
/* A catch flashes the beam pink, the hallucinations' colour */
.scan-beam.is-miss { background: var(--fake); box-shadow: 0 0 18px 4px rgba(226, 51, 107, .45); }

.scan-legend { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--trace-ink); transition: opacity calc(.4s * var(--pace)) ease; }
.scan-legend i { width: 22px; height: 7px; border-radius: 4px; background: var(--found); }

/* The two counts as one pair on one line, the quotes checked in dark ink and the hallucinations in their pink-red, over the twelve, each in one small neutral card with a pink cross */
.scan-stats { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 32px; margin-top: 24px; font-family: var(--font-heading); font-size: 16px; font-weight: 700; transition: opacity calc(.4s * var(--pace)) ease; }
.scan-stats p { display: flex; align-items: baseline; gap: 8px; }
.scan-stats b { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-align: right; }
.scan-stats span { text-wrap: balance; }
.scan-checked { color: var(--ink); }
.scan-removed { color: var(--fake-ink); }
.scan-fakes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 10px; max-width: 700px; margin: 12px auto 0; }
.scan-fakes li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(39, 27, 54, .08); transition: opacity calc(.2s * var(--pace)) ease, transform calc(.27s * var(--pace)) cubic-bezier(.34, 1.56, .64, 1); }
.scan-fakes li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--fake) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
/* Struck through in the hallucinations' pink */
.scan-fakes p { font-size: 15px; line-height: 1.3; color: var(--muted); text-decoration: line-through 1.5px var(--fake-ink); }

/* The transcripts' story */
.check.is-armed .scan-page mark:not(.on) { background: rgba(39, 27, 54, .1); box-shadow: none; }
.check.is-armed .scan-page mark.on { animation: scan-hit calc(.33s * var(--pace)) ease-out; }
@keyframes scan-hit { 0% { background: var(--mint-light); box-shadow: 0 0 16px rgba(6, 214, 160, .8); } }
.check.is-armed.is-scan .scan-beam { opacity: 1; }
.check.is-armed:not(.is-result) .scan-legend { opacity: 0; }
.check.is-armed:not(.is-result) .scan-stats { opacity: 0; }
/* The transcripts stay out of sight until the conversations and the insight above them have played */
.scan-pages { transition: opacity calc(.3s * var(--pace)) ease; }
.check.is-armed:not(.is-check) .scan-pages { opacity: 0; }
.check.is-armed .scan-fakes li:not(.on) { opacity: 0; transform: translateY(-8px) scale(.94); }

/* On a phone, two transcripts side by side, and the twelve cards smaller */
@media (max-width: 720px) {
  .scan { margin-top: 26px; }
  .scan-pages { grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 0 10px 10px 0; }
  .scan-beam { left: -4px; }
  .scan-page { padding: 16px 14px 10px; box-shadow: 0 0 0 1px rgba(39, 27, 54, .08), 5px 5px 0 -1px #E3E5E4, 10px 10px 0 -2px #F1F3F4; }
  .scan-page:nth-child(3) { display: none; }
  .scan-page p { gap: 4px; height: 6px; margin-bottom: 8px; }
  .scan-legend { margin-top: 18px; font-size: 12px; }
  /* On a phone the pair stacks, each count centred on its own line */
  .scan-stats { flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; font-size: 12.5px; }
  .scan-stats p { display: block; text-align: center; text-wrap: balance; }
  .scan-stats b { margin-right: 6px; font-size: 21px; }
  .scan-fakes { gap: 6px; margin-top: 10px; }
  .scan-fakes li { gap: 6px; padding: 6px 8px; border-radius: 8px; }
  .scan-fakes li::before { width: 12px; height: 12px; background-size: 8px; }
  .scan-fakes p { font-size: 12.5px; line-height: 1.25; text-decoration-thickness: 1px; }
}