/* Product page, Follow one answer (the captain, 7 Oct): one answer runs the length of the page, said, grouped, linked, backed, zoomed in and checked, in the site's own tokens and Brand Guide colours only.
   Every story arms with .is-armed and plays to the finished picture; without it (phones, reduced motion, no script) the markup is the finished picture. */

/* Two-colour headings: a pink prefix line (span) or pink words inside the line (em); pink heading text is fine on the night, pink strokes are not */
.pp .section-head :is(h1, h2) span { display: block; margin-bottom: .18em; font-size: .62em; color: var(--magenta); }
.pp .section-head :is(h1, h2) em { font-style: normal; color: var(--magenta); }
.pp .section-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.pp .section-head.is-center > p:not(.kicker) { max-width: 38em; margin-left: auto; margin-right: auto; }
.pp main > .pp-hero:first-child { padding-top: 64px; }
/* The captain's spacing rule, 7 Oct: at least 80 px from a section's content to its edge on desktop, 120 px where it fits, and 40 to 80 px on a phone.
   The site's 110 px becomes 120 px here and the closing's 72 px foot 120 px; phones keep the site's 56 px and the closing's 48 px */
@media (min-width: 721px) {
  .pp main > .block { padding-top: 120px; padding-bottom: 120px; }
  .pp main > .elephant { padding-bottom: 120px; }
}

/* Kicker with a step number: the page walks through the answer's six steps in order */
.pp-step { display: inline-flex; align-items: center; gap: 10px; }
.pp-step b { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--magenta); color: #fff; font-size: 12px; letter-spacing: 0; }
.dark .pp-step b { background: #fff; color: var(--aubergine); }

/* A white card, the site's house card, on either background */
.pp-card { position: relative; border: 1px solid var(--line); border-radius: 20px; background: #fff; color: var(--ink); padding: 28px; box-shadow: 0 1px 2px rgba(38, 84, 124, .06), 0 10px 28px -14px rgba(38, 84, 124, .18); }
.dark .pp-card { border-color: transparent; box-shadow: 0 22px 44px -22px rgba(10, 7, 14, .8); }
/* A white card on the night keeps the light page's example tag */
.dark .pp-card .example-tag { color: var(--muted); border-color: var(--line); background: #fff; }
.pp-card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.pp-label { margin: 0; font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* The count stays with its noun, 320 people, however the label wraps */
.pp-label b { color: var(--ink); white-space: nowrap; }
.pp-wide { max-width: 1040px; }
.pp-mid { max-width: 880px; }
/* Under a centred head the piece is centred too; under a left head it keeps to the left */
.section-head.is-center ~ :is(.pp-wide, .pp-mid), .pp-follow .pp-carry { margin-left: auto; margin-right: auto; }

/* While a story arms nothing may move, so the finished picture never flashes out first */
.is-arming, .is-arming * { transition: none !important; animation: none !important; }

/* ---------- The few causes: biggest first, one plain bar and one share each ---------- */
.pp-causes { display: grid; gap: 20px; }
.pp-cause { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 70px; gap: 8px 16px; align-items: center; padding: 4px 0; }
.pp-num { width: 30px; height: 30px; border-radius: 50%; background: var(--soft); color: var(--ink); font-family: var(--font-heading); font-size: 14px; font-weight: 800; display: grid; place-items: center; }
.pp-name { margin: 0; font-family: var(--font-heading); font-size: 19px; font-weight: 700; line-height: 1.3; }
.pp-pct { margin: 0; font-family: var(--font-heading); font-size: 26px; font-weight: 800; text-align: right; }
.pp-bar { grid-column: 2 / 4; height: 12px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.pp-bar i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: var(--aubergine); transform-origin: left; }
.pp-tag { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 99px; font-family: var(--font-heading); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: 3px; white-space: nowrap; }
.pp-tag.is-root { background: var(--magenta); color: #fff; }
.pp-tag.is-loud { background: var(--soft); color: var(--ink-soft); }
.pp-tag.is-mine { background: var(--aubergine); color: #fff; }
.pp-cause.is-root .pp-num { background: var(--magenta); color: #fff; }
.pp-cause.is-root .pp-bar i { background: var(--magenta); }
.pp-cause.is-mine::before { content: ""; position: absolute; inset: -10px -14px; border-radius: 14px; background: #FFEDC2; z-index: 0; }
.pp-cause.is-mine > * { position: relative; z-index: 1; }
.pp-cause.is-mine .pp-bar { background: #fff; }
.pp-who { grid-column: 2 / 4; margin: 0; font-size: 15px; color: var(--ink-soft); }
.pp-funnel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 22px; font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--muted); }
.pp-funnel b { font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.pp-funnel i { font-style: normal; font-size: 26px; color: var(--magenta); }
[data-pp="causes"].is-armed .pp-cause { transition: opacity .3s calc(var(--i) * 140ms), transform .35s calc(var(--i) * 140ms) cubic-bezier(.2, .8, .2, 1); }
[data-pp="causes"].is-armed .pp-bar i { transition: transform .7s calc(var(--i) * 140ms + 120ms) cubic-bezier(.3, .7, .2, 1); }
[data-pp="causes"].is-armed:not(.is-in) .pp-cause { opacity: 0; transform: translateY(8px); }
[data-pp="causes"].is-armed:not(.is-in) .pp-bar i { transform: scaleX(0); }
[data-pp="causes"].is-armed .pp-tag, [data-pp="causes"].is-armed .pp-who, [data-pp="causes"].is-armed .pp-cause.is-mine::before { transition: opacity .35s; }
[data-pp="causes"].is-armed:not(.is-hit) :is(.pp-tag, .pp-who), [data-pp="causes"].is-armed:not(.is-hit) .pp-cause.is-mine::before { opacity: 0; }
[data-pp="causes"].is-armed .pp-funnel b { transition: opacity .3s; }
[data-pp="causes"].is-armed:not(.is-in) .pp-funnel :is(b:last-of-type, i, span:last-child) { opacity: 0; }

/* ---------- What drives what: the cause chain ---------- */
.pp-chain { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr) 92px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0; align-items: center; }
.pp-node { border-radius: 18px; padding: 22px 22px 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(38, 84, 124, .06), 0 10px 28px -14px rgba(38, 84, 124, .18); }
.pp-node .pp-name { font-size: 19px; }
.pp-node .pp-share { margin: 10px 0 0; font-size: 15px; color: var(--muted); }
.pp-node .pp-share b { font-family: var(--font-heading); font-size: 22px; font-weight: 800; color: var(--ink); margin-right: 4px; }
.pp-node.is-root { border: 2px solid var(--magenta); }
.pp-node.is-root .pp-share b { color: var(--magenta); }
.pp-node.is-mine { background: #FFEDC2; border-color: #FFEDC2; }
.pp-flag { display: inline-block; margin: 0 0 10px; padding: 4px 11px; border-radius: 99px; background: var(--magenta); color: #fff; font-family: var(--font-heading); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pp-flag.is-loud { background: var(--soft); color: var(--ink-soft); }
.pp-flag.is-mine { background: var(--aubergine); }
.pp-arrow { position: relative; height: 4px; margin: 0 12px; border-radius: 2px; background: var(--magenta); transform-origin: left; }
.pp-arrow::after { content: ""; position: absolute; right: -1px; top: 50%; width: 13px; height: 13px; border: solid var(--magenta); border-width: 4px 4px 0 0; transform: translateY(-50%) rotate(45deg); }
.pp-arrow span { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-family: var(--font-heading); font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--magenta); }
.pp-chain .pp-side { grid-column: 5; grid-row: 2; display: grid; justify-items: center; }
.pp-side .pp-uparrow { position: relative; width: 4px; height: 44px; margin: 6px 0 8px; border-radius: 2px; background: #929699; }
.pp-side .pp-uparrow span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-family: var(--font-heading); font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--muted); }
.pp-side .pp-uparrow::after { content: ""; position: absolute; left: 50%; top: -1px; width: 11px; height: 11px; border: solid #929699; border-width: 4px 4px 0 0; transform: translateX(-50%) rotate(-45deg); }
.pp-side .pp-node { width: 100%; padding: 14px 18px; box-shadow: none; background: var(--soft); border-color: var(--soft); }
.pp-side .pp-name { font-size: 16px; }
.pp-side .pp-share { margin-top: 4px; font-size: 14px; }
.pp-side .pp-share b { font-size: 17px; }
.pp-fix { grid-column: 1 / 4; grid-row: 2; align-self: start; display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: #C3FDEE; border: 1px solid #06D6A0; }
.pp-fix .pp-fix-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #048B67; color: #fff; }
.pp-fix .pp-fix-icon .icon { width: 16px; height: 16px; }
.pp-fix p { margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink); }
.pp-fix p b { display: block; font-family: var(--font-heading); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #048B67; }
.pp-fix p strong { font-family: var(--font-heading); font-size: 17px; font-weight: 700; }
.pp-fix p small { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-soft); }
/* The people's own fix under the whole chain, so the piece ends on it (the captain, 7 Oct) */
.pp-fix.is-last { width: fit-content; max-width: 820px; margin: 36px auto 0; }
[data-pp="chain"].is-armed :is(.pp-node, .pp-side, .pp-fix, .pp-flag, .pp-arrow span) { transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); }
[data-pp="chain"].is-armed .pp-arrow { transition: transform .4s cubic-bezier(.5, 0, .3, 1); }
[data-pp="chain"].is-armed:not(.is-n1) .pp-node.n1, [data-pp="chain"].is-armed:not(.is-n2) .pp-node.n2, [data-pp="chain"].is-armed:not(.is-n3) .pp-node.n3 { opacity: 0; transform: translateY(8px); }
[data-pp="chain"].is-armed:not(.is-a1) .pp-arrow.a1, [data-pp="chain"].is-armed:not(.is-a2) .pp-arrow.a2 { transform: scaleX(0); }
[data-pp="chain"].is-armed:not(.is-a1) .pp-arrow.a1 span, [data-pp="chain"].is-armed:not(.is-a2) .pp-arrow.a2 span { opacity: 0; }
[data-pp="chain"].is-armed:not(.is-side) .pp-side, [data-pp="chain"].is-armed:not(.is-fix) .pp-fix { opacity: 0; transform: translateY(8px); }
[data-pp="chain"].is-armed:not(.is-flags) .pp-flag { opacity: 0; }

/* ---------- Support per team for one topic at a time ---------- */
.pp-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.pp-topic { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--line-on-dark); border-radius: 999px; background: rgba(255, 255, 255, .06); font: 700 14px/1.2 var(--font-heading); color: #fff; cursor: pointer; text-align: left; transition: background .25s, color .25s, border-color .25s; }
.pp-topic:hover { border-color: rgba(255, 255, 255, .4); }
.pp-topic[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--ink); }
.pp-topic .pp-mine-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--yellow); }
.pp-teams { display: grid; gap: 14px; }
.pp-team { display: grid; grid-template-columns: 160px minmax(0, 1fr) 64px; gap: 16px; align-items: center; }
.pp-team-name { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--ink); }
.pp-team-name i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.pp-team .pp-bar { grid-column: auto; height: 16px; }
.pp-team .pp-bar i { width: var(--v); background: var(--c); transition: width .5s cubic-bezier(.3, .7, .2, 1); }
.pp-team .pp-pct { font-size: 22px; }
/* The callouts share one cell, so the tallest keeps its room and switching never moves the page; each sits at the top, so its bar is as tall as its own lines.
   The takeaway pops (the captain, 7 Oct): bigger type with room around it, a pink bar, and the shares it turns on in heavier pink letters, as the heading's pink words */
.pp-calls { display: grid; margin-top: 40px; }
.pp-call { grid-area: 1 / 1; align-self: start; position: relative; margin: 0; padding: 2px 0 4px 26px; font-family: var(--font-heading); font-size: 26px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: #fff; text-wrap: balance; visibility: hidden; }
.pp-call::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; width: 6px; border-radius: 6px; background: var(--magenta); }
.pp-call b { font-weight: 800; white-space: nowrap; color: var(--magenta); }
.pp-call.is-on { visibility: visible; }
[data-pp="support"].is-armed .pp-team .pp-bar i { transition: transform .7s calc(var(--i) * 110ms) cubic-bezier(.3, .7, .2, 1), width .5s cubic-bezier(.3, .7, .2, 1); transform-origin: left; }
[data-pp="support"].is-armed:not(.is-in) .pp-team .pp-bar i { transform: scaleX(0); }
[data-pp="support"].is-armed .pp-team .pp-pct { transition: opacity .3s calc(var(--i) * 110ms + 300ms); }
[data-pp="support"].is-armed:not(.is-in) .pp-team .pp-pct { opacity: 0; }

/* ---------- Zoom in: one team at a time, its own top causes (the captain, 7 Oct) ---------- */
/* Each team's causes are one pane; the panes share one cell, so the card keeps the height of the tallest whichever team shows */
.pp-zoom-card { display: grid; }
.pp-zoom-pane { grid-area: 1 / 1; min-width: 0; visibility: hidden; }
.pp-zoom-pane.is-on { visibility: visible; }
.pp-team-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.pp-topic .pp-team-dot { margin-right: 8px; }
.pp-label .pp-team-dot { margin-right: 8px; vertical-align: 0; }
/* The 4 causes keep their numbers from step 2; a cause only this team names has a ring in the team's colour and its own tag */
.pp-cause.is-own .pp-num { background: none; box-shadow: inset 0 0 0 3px var(--c); }
.pp-tag.is-own { padding: 1.5px 8.5px; border: 1.5px solid var(--c); background: #fff; color: var(--ink); }
.pp-zoom-card .pp-causes { gap: 18px; }
/* Backed's five teams share one name column, as wide as the longest name and no narrower than before, so Customer Support stays on one line */
.pp-teams { grid-template-columns: minmax(160px, max-content) minmax(0, 1fr) 64px; column-gap: 16px; }
.pp-team { grid-column: 1 / -1; grid-template-columns: subgrid; }
/* The story: a pane fades and grows into place as its team is picked, and its bars grow from nothing */
[data-pp="zoom"].is-armed .pp-zoom-pane { transform-origin: 50% 0; transition: opacity .2s, transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .2s; }
[data-pp="zoom"].is-armed .pp-zoom-pane:not(.is-on) { opacity: 0; transform: scale(.97); }
[data-pp="zoom"].is-armed .pp-zoom-pane.is-on { transition: opacity .3s .06s, transform .4s .06s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
[data-pp="zoom"].is-armed .pp-zoom-pane .pp-bar i { transform: scaleX(0); }
[data-pp="zoom"].is-armed.is-in .pp-zoom-pane.is-on .pp-bar i { transform: none; transition: transform .55s calc(var(--i) * 70ms + 80ms) cubic-bezier(.3, .7, .2, 1); }
[data-pp="zoom"].is-armed .pp-zoom-pane .pp-pct { transition: opacity .25s calc(var(--i) * 70ms + 200ms); }
[data-pp="zoom"].is-armed:not(.is-in) .pp-pct { opacity: 0; }
@media (max-width: 720px) {
  .pp-teams { grid-template-columns: minmax(0, 1fr); }
  .pp-team { grid-template-columns: minmax(0, 1fr) 54px; }
  .pp-zoom-card .pp-causes { gap: 16px; }
  .pp-tag.is-own { padding: 1px 8px; }
}

/* ---------- Zoomed in as the captain picked it (7 Oct): left to right, the teams, the team's 3 causes, a line from each to its place for all teams, all teams' 3.
   Each column shows its key cause, this answer's cause and the cause to fix first. One highlight, pink: the team's key cause, its line and its place for all teams;
   the tags and every other row stay neutral, and the team colours mark the teams; no key line under the card (the captain, 7 Oct). On the light page, after Backed's night ---------- */
.zl-pick { --lag: 400ms; --draw: 1300ms; }
.zl-pick .zl-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.zl-pick .zl-tiles { display: grid; gap: 10px; }
.zl-pick .zl-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: background .25s, border-color .25s, color .25s; }
.zl-pick .zl-tile b { font-family: var(--font-heading); font-size: 16px; font-weight: 700; line-height: 1.25; }
.zl-pick .zl-tile span { grid-column: 2; font-size: 14px; color: var(--muted); }
.zl-pick .zl-tile .pp-team-dot { box-shadow: 0 0 0 2px #fff; }
.zl-pick .zl-col-head .pp-team-dot { margin-right: 2px; }
.zl-pick .zl-tile:hover { border-color: rgba(39, 27, 54, .3); }
.zl-pick .zl-tile[aria-pressed="true"] { background: var(--aubergine); border-color: var(--aubergine); color: #fff; }
.zl-pick .zl-tile[aria-pressed="true"] span { color: var(--muted-on-dark); }
.zl-pick .zl-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
.zl-pick .zl-panes { display: grid; }
.zl-pick .zl-pane { grid-area: 1 / 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 104px; visibility: hidden; }
.zl-pick .zl-pane.is-on { visibility: visible; }
.zl-pick .zl-col { min-width: 0; }
.zl-pick .zl-col-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .35em; height: 40px; margin: 0; font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.zl-pick .zl-col-head b { color: var(--ink); white-space: nowrap; }
.zl-pick .zl-list { list-style: none; margin: 0; padding: 0; }
.zl-pick .zl-row { position: relative; height: 76px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; }
.zl-pick .zl-row > * { position: relative; z-index: 1; }
.zl-pick .pp-name { font-size: 16px; }
.zl-pick .zl-pct { margin: 0; font-family: var(--font-heading); font-size: 22px; font-weight: 800; color: var(--ink); text-align: right; white-space: nowrap; }
.zl-pick .zl-row .pp-tag { margin-left: 8px; padding: 1.5px 8.5px; border: 1.5px solid var(--line); background: #fff; color: var(--muted); vertical-align: 2px; }
.zl-pick .zl-was { display: none; }
.zl-pick .zl-row.is-key::before, .zl-pick[data-key="a"] .is-all [data-key="a"]::before, .zl-pick[data-key="b"] .is-all [data-key="b"]::before, .zl-pick[data-key="d"] .is-all [data-key="d"]::before { content: ""; position: absolute; inset: 4px -10px; z-index: 0; border-radius: 12px; background: rgba(226, 51, 107, .08); }
.zl-pick .zl-row.is-key .zl-pct, .zl-pick[data-key="a"] .is-all [data-key="a"] .zl-pct, .zl-pick[data-key="b"] .is-all [data-key="b"] .zl-pct, .zl-pick[data-key="d"] .is-all [data-key="d"] .zl-pct { color: var(--magenta); }
/* The lines stop short of the rows on both sides, clear of the pink band */
.zl-pick .zl-lines { display: block; width: calc(100% - 28px); height: 228px; margin: 40px 14px 0; overflow: visible; }
.zl-pick .zl-lines path { fill: none; stroke: rgba(39, 27, 54, .22); stroke-width: 2.5; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
.zl-pick .zl-lines path.is-key { stroke: var(--magenta); stroke-width: 4; }
/* A page cached from before keeps its key lines in the markup: they stay hidden, as on the page now */
.zl-pick .pp-calls { display: none; }
/* Left to right: the tiles, the team's rows, its lines, then all teams' rows */
.zl-pick.is-armed .zl-tile { transition: background .25s, border-color .25s, color .25s, opacity .6s calc(var(--i) * 120ms), transform .7s calc(var(--i) * 120ms) cubic-bezier(.2, .8, .2, 1); }
.zl-pick.is-armed:not(.is-in) .zl-tile { opacity: 0; transform: translateX(-12px); }
.zl-pick.is-armed:not(.is-in) :is(.zl-row, .zl-col-head) { opacity: 0; }
.zl-pick.is-armed:not(.is-in) .zl-lines path { stroke-dashoffset: 1; }
.zl-pick.is-armed.is-in .zl-pane.is-on .zl-col-head { animation: zl-rise .7s var(--lag) cubic-bezier(.2, .8, .2, 1) both; }
.zl-pick.is-armed.is-in .zl-pane.is-on .zl-row { animation: zl-rise .7s calc(var(--i) * 140ms + var(--lag)) cubic-bezier(.2, .8, .2, 1) both; }
.zl-pick.is-armed.is-in .zl-pane.is-on .zl-lines path { animation: zl-draw 1.2s var(--draw) cubic-bezier(.3, .7, .2, 1) both; }
.zl-pick.is-armed.is-in .is-all .zl-col-head { animation: zl-rise .7s 2000ms cubic-bezier(.2, .8, .2, 1) both; }
.zl-pick.is-armed.is-in .is-all .zl-row { animation: zl-rise .7s calc(var(--i) * 140ms + 2000ms) cubic-bezier(.2, .8, .2, 1) both; }
/* A team the visitor picks comes in with one short fade, its rows and lines together, and the story never plays again for it (the captain, 7 Oct: "animations happen 3x") */
.zl-pick.is-armed.is-in[data-picked] .zl-pane.is-on .zl-col-head, .zl-pick.is-armed.is-in[data-picked] .zl-pane.is-on .zl-row, .zl-pick.is-armed.is-in[data-picked] .zl-pane.is-on .zl-lines path { animation: zl-fade .3s ease both; }
@keyframes zl-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes zl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes zl-fade { from { opacity: 0; } }
/* On a phone the tiles wrap, and the lines and all teams' column make way for one line under each cause */
@media (max-width: 720px) {
  .zl-pick .zl-grid, .zl-pick .zl-cols, .zl-pick .zl-pane { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .zl-pick .zl-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
  .zl-pick .zl-tile { padding: 9px 13px; border-radius: 14px; }
  .zl-pick .zl-tile b { font-size: 14px; }
  .zl-pick .zl-tile span { font-size: 12.5px; }
  .zl-pick .is-all, .zl-pick .zl-lines { display: none; }
  .zl-pick .zl-row { height: auto; min-height: 64px; padding: 10px 0; gap: 2px 10px; }
  .zl-pick .zl-row.is-key::before { inset: 0 -10px; }
  .zl-pick .zl-was { display: block; grid-column: 1 / 3; margin: 0; font-size: 13.5px; color: var(--muted); }
  .zl-pick .zl-pct { font-size: 20px; }
}

/* ---------- One quote, checked word for word (compact) ---------- */
.pp-check { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.pp-transcript { padding: 20px 22px; border-radius: 14px; background: var(--soft); font-size: 16px; line-height: 1.55; color: #5F6366; }
.pp-transcript p { margin: 0 0 10px; }
.pp-transcript p:last-child { margin: 0; }
.pp-transcript .who { display: block; font-family: var(--font-heading); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #929699; }
.pp-transcript .is-quote { color: var(--ink); }
.pp-transcript mark { padding: 1px 0; background: #C3FDEE; color: var(--ink); box-shadow: 0 0 0 2px #C3FDEE; border-radius: 2px; transition: background .2s, box-shadow .2s; }
.pp-verdict { display: flex; flex-direction: column; gap: 14px; }
.pp-found { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--font-heading); font-size: 19px; font-weight: 800; color: var(--ink); }
.pp-found .mark { width: 30px; height: 30px; background: #048B67; color: #fff; }
.pp-found .mark .icon { width: 15px; height: 15px; }
.pp-found small { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--muted); }
.pp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.pp-stats p { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--soft); font-size: 14px; line-height: 1.35; color: var(--ink-soft); }
.pp-stats b { display: block; font-family: var(--font-heading); font-size: 26px; font-weight: 800; color: var(--ink); }
.pp-stats .is-removed b { color: #D90808; }
.pp-fake { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed #FDC4C4; background: #FCF7F7; font-size: 15px; line-height: 1.4; }
.pp-fake .mark { width: 20px; height: 20px; margin-top: 1px; background: #D90808; color: #fff; }
.pp-fake .mark .icon { width: 10px; height: 10px; }
.pp-fake s { color: var(--ink-soft); text-decoration-color: #D90808; text-decoration-thickness: 2px; }
.pp-fake small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
[data-pp="check"].is-armed .pp-transcript mark { background: transparent; box-shadow: none; transition: background .18s calc(var(--i) * 75ms), box-shadow .18s calc(var(--i) * 75ms); }
[data-pp="check"].is-armed.is-scan .pp-transcript mark { background: #C3FDEE; box-shadow: 0 0 0 2px #C3FDEE; }
[data-pp="check"].is-armed :is(.pp-found, .pp-stats, .pp-fake) { transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); }
[data-pp="check"].is-armed:not(.is-found) .pp-found, [data-pp="check"].is-armed:not(.is-stats) .pp-stats, [data-pp="check"].is-armed:not(.is-fake) .pp-fake { opacity: 0; transform: translateY(6px); }
/* The made-up quote is struck through as it shows: a copy of it laid over it carries the same line-through, drawn left to right; the script copies the words */
@property --strike { syntax: "<number>"; inherits: true; initial-value: 1; }
.pp-check-stage.is-armed .pp-fake s { position: relative; display: inline-block; text-decoration-color: transparent; }
.pp-check-stage.is-armed .pp-fake s::after { content: attr(data-text); position: absolute; inset: 0; color: transparent; text-decoration: line-through 2px #D90808; clip-path: inset(-4px calc((1 - var(--strike)) * (100% + 4px) - 2px) -4px -2px); transition: --strike .35s cubic-bezier(.4, 0, .3, 1); }
.pp-check-stage.is-armed:not(.is-strike) .pp-fake s::after { --strike: 0; }

/* The scan before the check (the captain, 7 Oct): the script lays a tape of transcripts over the conversation, and a beam reads it on the followed quote's line.
   Every quote it passes lights up green; the tape runs on to conversation #0213 itself and stops there, under the beam, and the tape goes */
.pp-transcript { position: relative; }
.pp-scan { position: absolute; inset: 0; z-index: 1; overflow: hidden; padding: 20px 22px; border-radius: inherit; background: var(--soft); }
.pp-scan::before, .pp-scan::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; height: 20px; }
.pp-scan::before { top: 0; background: linear-gradient(var(--soft), rgba(241, 243, 244, 0)); }
.pp-scan::after { bottom: 0; background: linear-gradient(rgba(241, 243, 244, 0), var(--soft)); }
.pp-scan-turn + .pp-scan-turn { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(39, 27, 54, .08); }
.pp-scan-p + .pp-scan-p { margin-top: 10px; }
/* Each speaker's name and each line of what they said as a bar, at the conversation's own line height */
.pp-scan-who { display: flex; align-items: center; height: calc(11.5px * 1.55); }
.pp-scan-who::before { content: ""; width: var(--w); height: 6px; border-radius: 3px; background: rgba(146, 150, 153, .4); }
.pp-scan-line { display: flex; align-items: center; gap: 5px; width: var(--w); height: 1.55em; }
.pp-scan-line :is(i, b) { flex: 1; height: 8px; border-radius: 4px; background: rgba(39, 27, 54, .1); }
.pp-scan-line b.on { background: var(--mint); box-shadow: 0 0 10px rgba(6, 214, 160, .35); animation: pp-scan-hit .33s ease-out; }
@keyframes pp-scan-hit { 0% { background: var(--mint-light); box-shadow: 0 0 16px rgba(6, 214, 160, .8); } }
/* The beam, on the followed quote's line; it flashes the made-up quotes' red at each one it finds nowhere */
.pp-scan-beam { position: absolute; left: 10px; right: 10px; top: var(--y, 50%); z-index: 2; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--mint); box-shadow: 0 0 14px 2px rgba(6, 214, 160, .55); opacity: 0; transition: opacity .25s, background-color .12s, box-shadow .12s; }
.pp-scan.is-on .pp-scan-beam { opacity: 1; }
.pp-scan-beam.is-miss { background: #D90808; box-shadow: 0 0 18px 4px rgba(217, 8, 8, .4); }
/* The live promise under the check, its two words painted on the live brush in turn; --p is typed here so the brush can run as a transition */
@property --p { syntax: "<number>"; inherits: true; initial-value: 1; }
.pp-promise { margin-top: 44px; }
.pp-check-stage.is-armed .pp-promise { transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.pp-check-stage.is-armed .pp-promise .brush { transition: --p .4s cubic-bezier(.4, 0, .3, 1); }
.pp-check-stage.is-armed:not(.is-promise) .pp-promise { opacity: 0; transform: translateY(10px); }
.pp-check-stage.is-armed:not(.is-b1) .pp-promise .brush:nth-of-type(1), .pp-check-stage.is-armed:not(.is-b2) .pp-promise .brush:nth-of-type(2) { --p: 0; }
/* The promise as the captain asked, 7 Oct: Reliable and consistent in the pink letters every heading highlights with, no brush behind them, and its other words white on the night */
.pp-promise .brush, .pp-promise .brush > span { padding-inline: 0; margin-inline: 0; background: none; }
.pp-promise .brush > span { color: var(--magenta-hot); -webkit-background-clip: border-box; background-clip: border-box; }
.dark .pp-promise .check-result-head { color: #fff; }

/* ---------- The closing question at the size of the page's other headings (the captain, 7 Oct) ---------- */
.closing .ask { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.08; letter-spacing: -0.02em; }
@media (max-width: 720px) { .closing .ask { font-size: 31px; } }
@media (max-width: 374px) { .closing .ask { font-size: 30px; } }

/* ---------- The answer that travels with the reader ---------- */
.pp-carry { display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 0 0 30px; padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 28px -16px rgba(38, 84, 124, .3); }
.dark .pp-carry { border-color: transparent; box-shadow: 0 16px 36px -18px rgba(10, 7, 14, .8); }
.pp-carry .icon { flex: none; width: 26px; height: 26px; color: var(--magenta); }
.pp-carry q { flex: 1 1 auto; font-family: var(--font-heading); font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ink); quotes: "\201C" "\201D"; }
/* Each language's own quotation marks, as its copy writes them */
:lang(de) .pp-carry q { quotes: "\201E" "\201C"; }
:lang(fr) .pp-carry q { quotes: "\00AB\00A0" "\00A0\00BB"; }
:lang(sv) .pp-carry q { quotes: "\201D" "\201D"; }
.pp-carry .pp-state { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--aubergine); color: #fff; font-family: var(--font-heading); font-size: 12px; font-weight: 700; white-space: nowrap; }
/* The answer the hero ends on jumps down into this card (the captain, 7 Oct): the card waits unseen until the copy lands, then rings yellow a moment, as the answer did */
.pp-carry { transition: opacity .25s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.pp-carry.is-waiting { opacity: 0; transform: translateY(6px) scale(.98); }
.pp-carry.is-landed { animation: pp-landed 1s ease-out; }
@keyframes pp-landed { 0%, 35% { box-shadow: 0 0 0 3px var(--yellow), 0 10px 28px -16px rgba(38, 84, 124, .3); } }
.pp-jump { position: absolute; z-index: 40; margin: 0; box-sizing: border-box; pointer-events: none; }

/* ---------- Hero: one conversation where the second question finds the answer ---------- */
/* The heroes sit above the page glow, so it never tints their white cards */
.pp-hero-grid { position: relative; }
.pp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pp-hero-grid .section-head { margin-bottom: 0; }
.pp-hero-grid .section-head :is(h1, h2) { font-size: clamp(38px, 4.2vw, 60px); }
.pp-chat { padding: 22px 22px 18px; border-radius: 22px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-on-dark); }
.pp-chat .turn + .turn { margin-top: 12px; }
.pp-chat .turn.person .avatar { background: #5F6366; }
.pp-chat .avatar img { width: 30px; height: 30px; }
.pp-stop { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint-on-dark); }
.pp-stop::before, .pp-stop::after { content: ""; flex: 1 1 auto; border-top: 2px dashed rgba(255, 255, 255, .22); }
.pp-chat .turn.is-this .bubble { box-shadow: 0 0 0 3px var(--yellow); font-weight: 700; }
[data-hero="chat"].is-armed :is(.turn, .pp-stop) { transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); }
[data-hero="chat"].is-armed:not(.is-t1) .turn.t1, [data-hero="chat"].is-armed:not(.is-t2) .turn.t2, [data-hero="chat"].is-armed:not(.is-t3) .turn.t3, [data-hero="chat"].is-armed:not(.is-t4) .turn.t4 { opacity: 0; transform: translateY(8px); }
[data-hero="chat"].is-armed:not(.is-stop) .pp-stop { opacity: 0; transform: translateY(6px); }
[data-hero="chat"].is-armed .turn.is-this .bubble { transition: box-shadow .35s; }
[data-hero="chat"].is-armed:not(.is-this) .turn.is-this .bubble { box-shadow: 0 0 0 3px transparent; }

/* ---------- The fixed step pill: the answer's journey ---------- */
.pp-track { position: fixed; left: 50%; bottom: 18px; z-index: 40; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 18px 40px -16px rgba(10, 7, 14, .55), 0 0 0 1px rgba(39, 27, 54, .08); transform: translate(-50%, 140%); opacity: 0; transition: transform .35s cubic-bezier(.3, .7, .2, 1), opacity .25s; }
.pp-track.is-shown { transform: translate(-50%, 0); opacity: 1; }
.pp-track > span { padding: 0 10px 0 12px; font-family: var(--font-heading); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pp-track a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-family: var(--font-heading); font-size: 13.5px; font-weight: 700; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: background .25s, color .25s; }
.pp-track a i { width: 8px; height: 8px; border-radius: 50%; background: #C6CBCB; transition: background .25s; }
.pp-track a.is-done i { background: #048B67; }
.pp-track a.is-on { background: var(--aubergine); color: #fff; }
.pp-track a.is-on i { background: var(--yellow); }
@media (max-width: 1099px) { .pp-track { display: none; } }

/* Why Elly and not Copilot, on the light page */
.ai-expertise.pp-light { background: #fff; }
.ai-expertise.pp-light .aix-board { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 10px 28px -14px rgba(38, 84, 124, .18); }
.ai-expertise.pp-light .aix-board-head { color: var(--muted); }
.ai-expertise.pp-light .aix-head-elly { color: var(--ink); }
.ai-expertise.pp-light .aix-row { border-top-color: var(--line); }
.ai-expertise.pp-light .aix-cell.is-bot { color: var(--muted); }
.ai-expertise.pp-light .aix-cell.is-bot i { background: #C6CBCB; }
.ai-expertise.pp-light .aix-cell.is-elly { color: var(--ink); }
.ai-expertise.pp-light .example-tag { color: var(--muted); border-color: var(--line); background: #fff; }
.ai-expertise.pp-light .replay { border-color: var(--line); color: var(--muted); }
/* ---------- Phones ---------- */
@media (max-width: 980px) {
  .pp-check, .pp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .pp-hero-grid { gap: 32px; }
  .pp-chain { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .pp-chain .pp-arrow { width: 4px; height: 50px; margin: 10px auto 12px; transform-origin: top; }
  .pp-chain .pp-arrow::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
  .pp-chain .pp-arrow span { left: 18px; bottom: 50%; transform: translateY(50%); }
  [data-pp="chain"].is-armed:not(.is-a1) .pp-arrow.a1, [data-pp="chain"].is-armed:not(.is-a2) .pp-arrow.a2 { transform: scaleY(0); }
  .pp-chain .pp-side { grid-column: auto; grid-row: auto; }
  .pp-chain .pp-fix { grid-column: auto; grid-row: auto; }
}
@media (max-width: 720px) {
  .pp main > .pp-hero:first-child { padding-top: 40px; }
  .pp-card { padding: 20px 18px; border-radius: 18px; }
  .pp-card-head { margin-bottom: 16px; }
  .pp-cause { grid-template-columns: 28px minmax(0, 1fr) 54px; gap: 6px 10px; }
  .pp-num { width: 26px; height: 26px; font-size: 13px; }
  .pp-name { font-size: 16px; }
  .pp-pct { font-size: 21px; }
  .pp-bar { grid-column: 1 / 4; }
  .pp-who { grid-column: 1 / 4; }
  .pp-tag { margin-left: 6px; }
  .pp-funnel b { font-size: 28px; }
  /* The count of causes stays with its word: the line breaks after the arrow, and a long label wraps beside the 4, never under it */
  .pp-funnel::after { content: ""; order: 1; flex-basis: 100%; margin-top: -6px; }
  .pp-funnel b:last-of-type, .pp-funnel span:last-child { order: 2; }
  .pp-funnel span:last-child { flex: 1 1 0; min-width: 0; }
  .pp-node { padding: 18px; }
  .pp-node .pp-name { font-size: 17px; }
  .pp-team { grid-template-columns: minmax(0, 1fr) 54px; gap: 6px 10px; }
  .pp-team .pp-bar { grid-column: 1 / 3; grid-row: 2; }
  .pp-team .pp-pct { grid-row: 1; grid-column: 2; font-size: 19px; }
  .pp-calls { margin-top: 32px; }
  .pp-call { padding-left: 20px; font-size: 20px; }
  .pp-call::before { width: 5px; }
  .pp-topic { min-height: 38px; padding: 0 13px; font-size: 13px; }
  .pp-stats b { font-size: 22px; }
  .pp-carry { margin-bottom: 22px; padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .pp-carry q { flex-basis: calc(100% - 40px); font-size: 15px; }
  .pp-carry .pp-state { margin-left: 36px; }
  .pp-promise { margin-top: 30px; }
  .pp-chat { padding: 16px 14px 14px; }
  .pp-hero-grid .section-head :is(h1, h2) { font-size: 34px; }
}