/* Oct 29 results variations (/design/results/a, b, c). Allen: the three outcomes say what "the
   team's agents work better" means, so they get fewer words and no line running into them; the
   tangle is there to be felt, not read, so phones get it stacked. Mobile first. */

/* A: one card, three facets, an Approved stamp on its corner. */
.rv-card { position: relative; justify-self: center; margin-top: 20px; box-sizing: border-box; width: min(100%, 360px); padding: 6px 22px; border: 1px solid var(--wf-line); border-radius: 14px; background: var(--wf-card); box-shadow: 0 10px 26px var(--theme-shadow); }
.rv-facets { margin: 0; padding: 0; list-style: none; }
.rv-facets li { display: flex; align-items: center; gap: 12px; padding: 14px 0; font: 500 18px/1.3 var(--font-heading); color: var(--wf-ink); }
.rv-facets li + li { border-top: 1px solid var(--wf-line); }
.rv-facets svg { flex: none; color: var(--palette-golden-600); }
@media (min-width: 768px) {
  .rv-card { width: min(100%, 760px); padding: 8px 12px; }
  .rv-facets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-facets li { justify-content: center; padding: 22px 12px; font-size: 20px; }
  .rv-facets li + li { border-top: 0; border-left: 1px solid var(--wf-line); }
}

/* The stamp (Jaycee, Oct 29: "nice but also sorta corny", like an office rubber stamp): a double
   ring, three stars, heavy tall type in caps (her call, Oct 29) and patchy ink from a noise mask. It thunks down once the
   card scrolls in. */
.rv-stamp { position: absolute; top: -26px; right: 10px; display: grid; justify-items: center; gap: 1px; padding: 4px 10px 5px; border: 3px solid currentColor; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--wf-card), inset 0 0 0 4px currentColor; background: var(--wf-card); font: 800 15px/1 var(--font-heading); letter-spacing: 0.08em; color: var(--theme-good); transform: rotate(-10deg) scaleY(1.12); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 140px 70px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 140px 70px; }
.rv-stamp-stars { font-size: 7px; letter-spacing: 0.4em; }
[data-theme="dark"] .rv-stamp { color: color-mix(in srgb, var(--palette-holly-400) 75%, var(--palette-greyscale-50)); }
.st-js .rv-card .rv-stamp { opacity: 0; }
.st-js .rv-card.in .rv-stamp { animation: rv-thunk 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; }
@keyframes rv-thunk { from { opacity: 0; transform: rotate(-22deg) scale(2.2); } 60% { opacity: 1; } to { opacity: 1; transform: rotate(-10deg) scaleY(1.12); } }
@media (prefers-reduced-motion: reduce) { .st-js .rv-card .rv-stamp { opacity: 1; animation: none; } }
@media (min-width: 768px) { .rv-stamp { top: -32px; right: -18px; padding: 5px 13px 6px; font-size: 19px; } .rv-stamp-stars { font-size: 8px; } }

/* B: a passing checks summary, like the bottom of a pull request. */
.rv-checks { justify-self: center; box-sizing: border-box; width: min(100%, 420px); overflow: hidden; border: 1px solid var(--wf-line); border-radius: 12px; background: var(--wf-card); box-shadow: 0 10px 26px var(--theme-shadow); text-align: left; }
.rv-checks-h { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--wf-line); background: color-mix(in srgb, var(--theme-good) 10%, var(--wf-card)); font: 600 17px/1.3 var(--font-body); color: var(--theme-good); }
.rv-checks-list { margin: 0; padding: 6px 18px 10px; list-style: none; }
.rv-checks-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 17px; color: var(--wf-ink); }
.rv-checks-list svg { flex: none; color: var(--theme-good); }
[data-theme="dark"] .rv-checks-h, [data-theme="dark"] .rv-checks-list svg { color: color-mix(in srgb, var(--palette-holly-400) 75%, var(--palette-greyscale-50)); }

/* C: one line under the headline, no box. Every arrow points down, because all three shrink. */
.rv-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rv-line li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--theme-surface); font: 500 18px/1.3 var(--font-heading); color: var(--wf-ink); }
.rv-line svg { color: var(--theme-good); }
@media (min-width: 768px) { .rv-line { gap: 14px; } .rv-line li { font-size: 21px; padding: 10px 20px; } }

/* Phones: the tangle stacked. A and C drop the hand-off lines; B keeps them, card edge to card
   edge, so the heap still shows who passed what to whom. */
@media (max-width: 767px) {
  .rv-a .st-web .links .l-x, .rv-c .st-web .links .l-x, .rv .st-web > svg.labels { display: none; }

  /* A: a cascade, one card under the next, nudged left and right. */
  .rv-a .st-bleed .st-web { height: 1080px; }
  .rv-a .st-bleed .st-wc { left: calc((50 + (var(--mx) - 50) * 0.3) * 1%); top: calc(160px + var(--k) * 76px); z-index: calc(1 + var(--k)); width: min(230px, 64vw); }
  .rv-a .st-bleed .st-web-cap { top: 840px; }
  .rv-a .st-bleed .st-web .st-pp-logo { top: 980px; }

  /* B: a heap, spread wide (Jaycee, Oct 29): cards fan out further the lower they sit and run off
     both sides of a phone, so a few names and words show through. The spread is a fixed distance
     from the middle, so the stack never splits into two columns on wider phones. The tangle box clips them. */
  .rv-b .st-tangle { overflow-x: clip; }
  .rv-b .st-bleed .st-web { height: 930px; }
  .rv-b .st-bleed .st-wc { left: calc(50% + (var(--mx) - 50) / 24 * (64px + var(--k) * 13px)); top: calc(160px + var(--k) * 36px); z-index: calc(1 + var(--k)); width: min(230px, 62vw); transform: translateX(-50%) rotate(calc(var(--r) * 1.8)); }
  /* Powerplant sits right under the heap so the threads gather into it, then the caption. */
  .rv-b .st-bleed .st-web-cap { top: 720px; font-size: 20px; line-height: 1.35; }
  .rv-b .st-bleed .st-web .st-pp-logo { top: 580px; }

  /* C: a notification pile. The bounced PR on top, three more peeking out under it. */
  .rv-c .st-bleed .st-web { height: 600px; }
  .rv-c .st-bleed .st-wc { left: 50%; top: calc(160px + var(--k) * 14px); z-index: calc(10 - var(--k)); width: min(280px, 78vw); transform: translateX(-50%) scale(calc(1 - var(--k) * 0.05)); transform-origin: 50% 0; }
  .rv-c .st-bleed .st-wc.rv-deep { display: none; }
  .rv-c .st-bleed .st-web-cap { top: 340px; }
  .rv-c .st-bleed .st-web .st-pp-logo { top: 490px; }
}

/* B on desktop: the same web, still running off both sides, squashed shorter (Jaycee, Oct 29). */
@media (min-width: 768px) {
  .rv-b .st-bleed .st-web { height: 1000px; }
  .rv-b .st-bleed .st-wc { top: calc(90px + var(--y) * 0.6); }
  /* Jenn's email card tucks up under the team goal, so the middle of the web isn't empty. */
  .rv-b .st-bleed #w5 { top: 168px; }
  .rv-b .st-bleed .st-web-cap { top: 850px; font-size: 26px; line-height: 1.3; }
  .rv-b .st-bleed .st-web .st-pp-logo { top: 700px; }
}

/* D (Jaycee's pick, Oct 29): A's card on B's heap. The Powerplant logo, caption, results card and
   Book a demo grow
   shrink with scroll on the same curve as every other beat (story.css), so they move together;
   the heap cards stay still (scaling them looked odd). At full size on phones each still fits. */
/* Centre with translate rather than inside transform: scale multiplies a transform's translateX, so
   the caption slid sideways as it grew (Jaycee, Oct 29). */
.rv-d .st-bleed .st-web-cap { translate: -50% 0; transform: none; }
.rv-d .st-bleed .st-web .st-pp-logo { translate: -50% 0; transform: none; }
/* Room between the results card and Book a demo, since both grow toward each other. */
.st-d .rv-d .st-good-cta { margin-top: clamp(20px, 4vw, 56px); }
@media (prefers-reduced-motion: reduce) { .st-d .rv-d .st-web-cap[data-focus], .st-d .rv-d .st-good-cta[data-focus], .st-d .rv-d .st-pp-logo[data-focus] { scale: none; } }

/* D on phones: the heap hand-placed rather than a staircase (--sx, --sy, --sr, --sz per card). */
@media (max-width: 767px) {
  .rv-d .st-bleed .st-wc { left: calc(50% + var(--sx)); top: var(--sy); z-index: var(--sz); transform: translateX(-50%) rotate(var(--sr)); }
}

/* E to H (Allen, Oct 29: the outcomes as "a stamp associated with the heading", not boxes with icons
   and text; Jaycee: "stamps AROUND the words"). One green ink, patchy like a real rubber stamp.
   Caps are Jaycee's call for stamps. */
.rv-hs-st, .rv-fr { --ink: var(--theme-good); }
[data-theme="dark"] .rv-hs-st, [data-theme="dark"] .rv-fr { --ink: color-mix(in srgb, var(--palette-holly-400) 75%, var(--palette-greyscale-50)); }

/* E: three stamps pressed around the headline: top left, below, top right, overlapping its edges.
   They thunk down in turn as it scrolls in, and scale with it. */
.st-good.rv-hs { position: relative; display: block; padding: 40px 6px 46px; background: none; text-align: center; }
.rv-hs-st { --t: -8deg; position: absolute; padding: 5px 10px 6px; border: 2.5px solid var(--ink); border-radius: 6px; box-shadow: inset 0 0 0 2px var(--theme-surface), inset 0 0 0 3.5px var(--ink); background: var(--theme-surface); font: 800 12px/1.1 var(--font-heading); letter-spacing: 0.06em; white-space: nowrap; color: var(--ink); transform: rotate(var(--t)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 140px 70px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 140px 70px; }
.rv-hs-st:nth-of-type(2) { --t: -8deg; top: 6px; left: 0; }
.rv-hs-st:nth-of-type(3) { --t: 3deg; bottom: 4px; left: 50%; translate: -50% 0; }
.rv-hs-st:nth-of-type(4) { --t: 7deg; top: 2px; right: 0; }
.st-js .rv-hs .rv-hs-st { opacity: 0; }
.st-js .rv-hs.in .rv-hs-st { animation: rv-slam 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.st-js .rv-hs.in .rv-hs-st:nth-of-type(2) { animation-delay: 0.5s; }
.st-js .rv-hs.in .rv-hs-st:nth-of-type(3) { animation-delay: 0.8s; }
.st-js .rv-hs.in .rv-hs-st:nth-of-type(4) { animation-delay: 1.1s; }
@keyframes rv-slam { from { opacity: 0; transform: rotate(calc(var(--t) * 3)) scale(2); } 60% { opacity: 1; } to { opacity: 1; transform: rotate(var(--t)); } }
@media (min-width: 768px) {
  .st-good.rv-hs { padding: 46px 60px 54px; }
  .rv-hs-st { padding: 7px 14px 8px; font-size: 16px; }
  .rv-hs-st:nth-of-type(2) { top: 4px; left: 10px; }
  .rv-hs-st:nth-of-type(4) { top: 0; right: 10px; }
}

/* F: the headline inside one rubber-stamp frame, with the outcomes along its top and bottom edges,
   like the words around an office stamp. The frame thunks down once as it scrolls in. */
.st-good.rv-fr { --t: -3deg; display: grid; justify-items: center; gap: 8px; padding: 12px 18px 14px; border: 3px solid var(--ink); border-radius: 12px; box-shadow: inset 0 0 0 3px var(--theme-surface), inset 0 0 0 5px var(--ink); background: var(--theme-surface); text-align: center; rotate: var(--t); }
.rv-fr-edge { font: 800 11px/1.2 var(--font-heading); letter-spacing: 0.12em; color: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 140px 70px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 140px 70px; }
@media (min-width: 768px) {
  .st-good.rv-fr { padding: 16px 32px 18px; }
  .rv-fr-edge { font-size: 14px; }
}
.st-js .rv-fr { opacity: 0; }
.st-js .rv-fr.in { animation: rv-frame 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
@keyframes rv-frame { from { opacity: 0; rotate: -12deg; translate: 0 -20px; } 60% { opacity: 1; } to { opacity: 1; rotate: var(--t); translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .st-js .rv-hs .rv-hs-st, .st-js .rv-fr { opacity: 1; animation: none; } }

/* G: the same three stamps as round seals, a star over each, words in two lines. */
.rv-hs-round .rv-hs-st { display: grid; place-content: center; width: 78px; height: 78px; padding: 0 6px; border-radius: 50%; white-space: normal; text-align: center; font-size: 10px; line-height: 1.15; }
.rv-hs-round .rv-hs-st::before { content: "\2605"; font-size: 9px; }
.st-good.rv-hs-round { padding: 90px 6px 94px; }
.rv-hs-round .rv-hs-st:nth-of-type(2) { top: -4px; left: 4%; }
.rv-hs-round .rv-hs-st:nth-of-type(3) { bottom: -6px; }
.rv-hs-round .rv-hs-st:nth-of-type(4) { top: -8px; right: 4%; }
@media (min-width: 768px) {
  .st-good.rv-hs-round { padding: 30px 130px 34px; }
  .rv-hs-round .rv-hs-st { width: 104px; height: 104px; font-size: 13px; }
  .rv-hs-round .rv-hs-st:nth-of-type(2) { top: 50%; left: 0; translate: 0 -50%; }
  .rv-hs-round .rv-hs-st:nth-of-type(3) { bottom: -78px; }
  .rv-hs-round .rv-hs-st:nth-of-type(4) { top: 50%; right: 0; translate: 0 -50%; }
  .st-tangle-beat:has(.rv-hs-round) .st-good-cta { margin-top: 90px; }
}

/* H (Jaycee): the headline in a box, like the results card, with the three stamps pressed around
   its edges and corners, overlapping the border. */
.st-good.rv-hs-box { margin-inline: 4px; padding: 34px 18px; border: 1px solid var(--wf-line); border-radius: 14px; background: var(--wf-card); box-shadow: 0 10px 26px var(--theme-shadow); }
.rv-hs-box .rv-hs-st { background: var(--wf-card); box-shadow: inset 0 0 0 2px var(--wf-card), inset 0 0 0 3.5px var(--ink); }
.rv-hs-box .rv-hs-st:nth-of-type(2) { top: -16px; left: -4px; }
.rv-hs-box .rv-hs-st:nth-of-type(3) { bottom: -16px; }
.rv-hs-box .rv-hs-st:nth-of-type(4) { top: -14px; right: -4px; }
@media (min-width: 768px) {
  .st-good.rv-hs-box { padding: 48px 72px; }
  .rv-hs-box .rv-hs-st:nth-of-type(2) { top: -20px; left: -24px; }
  .rv-hs-box .rv-hs-st:nth-of-type(3) { bottom: -20px; }
  .rv-hs-box .rv-hs-st:nth-of-type(4) { top: -18px; right: -24px; }
}