/* 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)); }
}