/* report-stack (identity build, 15 Oct 2026): the Market Report as a pair of sheets, the cover beside (from 1280) or in front of (under 1280) chapter 9, one plan per line.
   Re-skinned to identity-comp/home-report-testimonials: NO box, no dotted grid, no camera. White sheets straight on the pink with the stepped page edges and the hard plate; CONFIDENTIAL on the cover
   (the kit's deeper red, no stamp on chapter pages); chapter 9's tab sticks out in green (our team) with its tick. The rules are the comp's (the `rt-` rules of that page's style block), renamed to this
   film's own `rp-` and `rs-` classes and scoped to the stage; the motion (builder.js: timings, eases, order, data-k and data-m targets) is unchanged.
   One stage at every width: under 768 the comp draws the same picture (cover in front, chapter 9's page behind with its "9 ✓" tab), so the one round plays there too (it replaces the old phone pair, report-cover and report-chapter).
   --rs (the sheet's width) and --ro (the back page's offset) are set by the band (home-src/css/report.css, `.rt-band`), as in the comp; the fallbacks below are the same numbers.
   This is the POSTER, the round's last frame; frame 0 is the director's own designed picture (the stamp, the chip fill and the two markers away, tab 9 not yet green and 16 px short of its place), painted from the
   tweens' `from` values while the stage is unseen. Nothing here keeps a layer promoted: the round is opacity, scaleX, one 16 px step and an SVG dash. */

/* the stage: a plain box on the ground (the comp's .rt-stage). The kit's stage base (paint containment, clip, isolation, container) is off so the page edges, the plate and tab 9 are never cropped. */
.kl-report-stack.kl-stage { position: relative; display: block; width: 100%; margin: 0; line-height: normal; contain: none; overflow: visible; isolation: auto; container-type: normal; }
/* the camera is the aria-hidden wrapper the stage contract asks for; here it is the comp's stage row (no camera moves in this film) */
.kl-report-stack .rp-in.kl-camera { position: relative; inset: auto; display: flex; align-items: flex-start; margin-top: 12px; transform-origin: 0 0; }
/* phone: sized from the column, never in fixed pixels. 98 = the back page's 52 px offset + chapter 9's 46 px tab, so the tab always ends inside the column */
.kl-report-stack .rp-slot { position: relative; flex: none; width: min(232px, calc(100% - 98px)); aspect-ratio: 256 / 362; }
.kl-report-stack .rp-slot-cover { z-index: 2; margin-top: 18px; }
.kl-report-stack .rp-slot-page { position: absolute; left: 52px; top: 0; z-index: 1; }
.kl-report-stack .rp-pg { position: absolute; inset: 0; padding: 26px 26px 0; visibility: hidden; }   /* chapter 9's page contents show from 1280; hidden (not display: none) so its lazy pictures still load: a lazy picture that is display: none never loads, and a harness that decodes every picture would wait on it for ever */
/* the pages under each sheet: three edges stepping down, each drawn by its bottom hairline only (the sheet's own ring draws the sides once), the hard plate under the last */
.kl-report-stack .rp-edges i { position: absolute; left: 0; right: 0; top: 0; height: 100%; display: block; background: var(--white); border-radius: var(--r-1); border-bottom: 1px solid var(--hair-l2); }
.kl-report-stack .rp-edges i:nth-child(1) { top: 4px; z-index: 3; }
.kl-report-stack .rp-edges i:nth-child(2) { top: 8px; z-index: 2; }
.kl-report-stack .rp-edges i:nth-child(3) { top: 12px; z-index: 1; box-shadow: var(--shadow-2); }
.kl-report-stack .rp-sheet { position: absolute; inset: 0; z-index: 5; background: var(--white); color: var(--ink); border-radius: var(--r-1); box-shadow: 0 0 0 1px var(--hair-l2); }

/* the cover */
.kl-report-stack .rs-toprule { position: absolute; left: 0; right: 0; top: 0; display: block; height: 4px; background: var(--red); border-radius: var(--r-1) var(--r-1) 0 0; }
.kl-report-stack .rs-mark { position: absolute; left: 18px; top: 20px; width: 26px; height: 26px; color: var(--red); }
.kl-report-stack .rs-stampw { position: absolute; right: 16px; top: 20px; display: block; }
.kl-report-stack .rs-stamp { display: block; padding: 6px 7px 4px 9px; border: 2px solid var(--red-text); border-radius: var(--r-1); color: var(--red-text);
  font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 72; text-transform: uppercase; font-size: 14px; line-height: 1; letter-spacing: .12em; white-space: nowrap; }
.kl-report-stack .rs-rule { position: absolute; left: 18px; right: 18px; top: 62px; display: block; height: 1.5px; background: var(--hair-l2); }
.kl-report-stack .rs-cv { position: absolute; left: 18px; right: 18px; top: 80px; bottom: 22px; display: flex; flex-direction: column; align-items: flex-start; }
.kl-report-stack .rs-title { margin: 0; font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 72; text-transform: uppercase; letter-spacing: .01em; font-size: 40px; line-height: .92; }
.kl-report-stack .rs-title span { display: block; }
.kl-report-stack .rs-sub { margin: 10px 0 0; font-weight: 600; font-size: 14px; line-height: 18px; letter-spacing: .015em; color: var(--ink-74); }   /* phone: the screen's one small size */
.kl-report-stack .rs-kpw { display: none; }
/* "Key points up front": the comp's yellow lane tag. The yellow is a node of its own (.rs-lit) that the round fills in; unlit it is the tag's ring on the white sheet */
.kl-report-stack .rs-kp { position: relative; isolation: isolate; display: inline-block; height: 24px; padding: 0 9px; border-radius: 12px; color: var(--ink); font-weight: 700; font-size: 14px; line-height: 24px; white-space: nowrap; }
.kl-report-stack .rs-kp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--ink); pointer-events: none; }   /* the ring is drawn over the fill, as the comp's tag draws it */
.kl-report-stack .rs-litw { position: absolute; inset: 0; z-index: -1; display: block; border-radius: 999px; will-change: transform; }
.kl-report-stack .rs-lit { position: absolute; inset: 0; display: block; border-radius: 999px; background: var(--yellow); }
.kl-report-stack .rs-kpt { position: relative; }
.kl-report-stack .rs-lines { display: grid; justify-items: start; gap: 10px; margin-top: auto; }
.kl-report-stack .rs-line { display: block; font-weight: 700; font-size: 17px; line-height: 22px; letter-spacing: .01em; white-space: nowrap; }
/* the two marked lines: the comp's <mark> is an inline box (padding 1 5 0, pulled 5 px left); the text span is that same inline box and the yellow marker sits on it, so the round can scale it in from the left */
.kl-report-stack .rs-real .rs-kt { position: relative; display: inline; padding: 1px 5px 0; margin-left: -5px; }
.kl-report-stack .rs-mk { position: absolute; inset: 0; z-index: -1; display: block; border-radius: 3px; background: var(--yellow); transform-origin: 0 50%; }
.kl-report-stack .rs-plain { display: none; }
.kl-report-stack .rs-specs { position: absolute; left: 18px; right: 18px; bottom: 18px; display: none; flex-wrap: wrap; gap: 8px; }
.kl-report-stack .rs-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; font-size: 14px; line-height: 1; white-space: nowrap; }

/* chapter 9: one plan per line (from 1280) */
.kl-report-stack .rp-run { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.kl-report-stack .rp-runn { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 72; font-size: 24px; line-height: 1; color: var(--red-text); }
.kl-report-stack .rp-runt { font-weight: 700; font-size: 19px; line-height: 22px; letter-spacing: .01em; }
.kl-report-stack .rp-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; margin-top: 16px; }
.kl-report-stack .rp-cl { margin: 0; font-weight: 600; font-size: 15px; line-height: 19px; color: var(--ink-74); }
.kl-report-stack .rp-cell-ad img { display: block; width: 100%; height: 150px; margin-top: 6px; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 1.5px var(--ink); }
.kl-report-stack .rp-ct { margin: 8px 0 0; font-weight: 700; font-size: 15px; line-height: 19px; }
.kl-report-stack .rp-mini { margin-top: 6px; padding: 5px 5px 7px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.kl-report-stack .rp-mini img { display: block; width: 100%; height: 68px; object-fit: cover; border-radius: 4px; }
.kl-report-stack .rp-mh { margin: 7px 3px 0; font-weight: 700; font-size: 15px; line-height: 19px; }
.kl-report-stack .rp-mb { display: flex; align-items: center; justify-content: space-between; height: 30px; margin: 8px 0 0; padding: 0 9px 0 11px; border-radius: 15px; background: var(--ink); color: var(--light); font-weight: 700; font-size: 15px; line-height: 1; }
.kl-report-stack .rp-mb svg { width: 15px; height: 15px; }
.kl-report-stack .rp-cell-kw { margin-top: 16px; }
.kl-report-stack .rp-kt { margin-top: 6px; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.kl-report-stack .rp-kr { display: flex; justify-content: space-between; gap: 10px; height: 30px; margin: 0; align-items: center; font-weight: 600; font-size: 15px; line-height: 1; border-top: 1px solid var(--hair-l); }
.kl-report-stack .rp-kr:first-child { border-top: 0; color: var(--ink-74); }
.kl-report-stack .rp-kr span:last-child { font-variant-numeric: tabular-nums; }
/* the chapter tabs down the page's right edge; tab 9 sticks out, green (our team), with its tick */
.kl-report-stack .rp-tabs { position: absolute; left: 100%; top: 0; z-index: 4; display: block; width: 0; height: 100%; clip-path: inset(-24px -120px -24px -1px); }
/* the tabs sit OVER the page (so a tab and its page are one shape, as in the comp), so the clip keeps them to the page's outside edge (and the 1 px they lap over its ring): while tab 9 is tucked 16 px in
   (frame 0 to its step at 2.00) it slides out from behind the page edge, as it did when the tabs sat under the page, instead of drawing its white and its ink ring over the page. The poster is unchanged. */
.kl-report-stack .rp-tabs i { position: absolute; left: -1px; display: block; width: 12px; height: 5.2%; background: var(--white); border: 1.5px solid var(--hair-l2); border-left: 0; border-radius: 0 5px 5px 0; transform-origin: 0 50%; }
.kl-report-stack .rp-tabs i:nth-child(1) { top: 7%; }
.kl-report-stack .rp-tabs i:nth-child(2) { top: 15.6%; }
.kl-report-stack .rp-tabs i:nth-child(3) { top: 24.2%; }
.kl-report-stack .rp-tabs i:nth-child(4) { top: 32.8%; }
.kl-report-stack .rp-tabs i:nth-child(5) { top: 41.4%; }
.kl-report-stack .rp-tabs i:nth-child(6) { top: 50%; }
.kl-report-stack .rp-tabs i:nth-child(7) { top: 58.6%; }
.kl-report-stack .rp-tabs i:nth-child(8) { top: 67.2%; }
.kl-report-stack .rp-tabs i:nth-child(10) { top: 84.4%; }
.kl-report-stack .rp-tabs .rp-tab9 { top: calc(75.8% - 9px); isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 4px; width: 46px; height: 40px; padding: 1.5px 1.5px 1.5px 0; background: var(--white); border: 0; border-radius: 0 8px 8px 0;
  font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 72; font-style: normal; font-size: 21px; line-height: 1; color: var(--ink); }
.kl-report-stack .rp-tab9 b { position: absolute; inset: 0; z-index: -1; display: block; background: var(--green); border-radius: 0 8px 8px 0; }
.kl-report-stack .rp-tab9::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--ink); border-left: 0; border-radius: 0 8px 8px 0; pointer-events: none; }   /* the ring is drawn over the green, as the comp's border is */
.kl-report-stack .rp-tab9 .rp-t9n { position: relative; }
.kl-report-stack .rp-tab9 svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* the tab 9 tick draws by dash: pathLength 1000 (in the markup), a dash of 2000 and a gap of 2000. The poster is drawn (offset 1000); 2120 is hidden with no dot from the round cap, so the round draws it from 2120 to the poster's own 1000 */
.kl-report-stack .rp-tab9 path { stroke-dasharray: 2000 2000; stroke-dashoffset: 1000; }

@media (min-width: 768px) {
  /* tablet: the phone's composition, bigger (the cover in front, chapter 9's page behind it with its "9 ✓" tab). --rs is the sheet width, --ro the back page's offset (set by the band) */
  .kl-report-stack .rp-slot { width: var(--rs, 280px); }
  .kl-report-stack .rp-slot-page { left: var(--ro, 56px); }
  .kl-report-stack .rs-cv { bottom: auto; }
  .kl-report-stack .rs-title { font-size: 38px; line-height: .95; }
  .kl-report-stack .rs-title span { display: inline; }
  .kl-report-stack .rs-sub { margin-top: 6px; font-size: 15px; line-height: 19px; }
  .kl-report-stack .rs-kpw { display: flex; margin-top: 20px; }
  .kl-report-stack .rs-lines { margin-top: 14px; }
  .kl-report-stack .rs-line { font-size: 16px; line-height: 20px; }
  .kl-report-stack .rs-specs { display: flex; }
}
@media (min-width: 1180px) {
  /* the kit's lane tag grows from 1180 (26 px, 15 px words) */
  .kl-report-stack .rs-kp { height: 26px; padding: 0 10px; border-radius: 13px; font-size: 15px; line-height: 26px; }
}
@media (min-width: 1024px) {
  /* iPad landscape and small laptops: the tablet cover at full size, all four key points on it */
  .kl-report-stack .rs-plain { display: block; }
}
@media (min-width: 1280px) {
  /* desktop: the cover beside chapter 9's open page (from 1280, where the chapter list has room for one line per chapter) */
  .kl-report-stack .rp-in.kl-camera { margin-top: 0; column-gap: 34px; }
  .kl-report-stack .rp-slot { width: 350px; }
  .kl-report-stack .rp-slot-cover { margin-top: 52px; }
  .kl-report-stack .rp-slot-page { position: relative; left: auto; top: auto; margin-top: 0; }
  .kl-report-stack .rp-pg { visibility: visible; }
  .kl-report-stack .rs-toprule { height: 5px; }
  .kl-report-stack .rs-mark { left: 28px; top: 28px; width: 34px; height: 34px; }
  .kl-report-stack .rs-stampw { right: 26px; top: 31px; }
  .kl-report-stack .rs-stamp { padding: 7px 8px 5px 11px; font-size: 17px; }
  .kl-report-stack .rs-rule { left: 28px; right: 28px; top: 84px; }
  .kl-report-stack .rs-cv { left: 28px; right: 28px; top: 104px; }
  .kl-report-stack .rs-title { font-size: 44px; }
  .kl-report-stack .rs-sub { margin-top: 8px; font-size: 17px; line-height: 22px; }
  .kl-report-stack .rs-kpw { margin-top: 26px; }
  .kl-report-stack .rs-lines { margin-top: 16px; gap: 12px; }
  .kl-report-stack .rs-line { font-size: 18px; line-height: 23px; font-weight: 600; }
  .kl-report-stack .rs-real { font-weight: 700; }
  .kl-report-stack .rs-specs { left: 28px; right: 28px; bottom: 28px; gap: 10px; }
  .kl-report-stack .rs-chip { height: 32px; padding: 0 13px; border-radius: 16px; font-size: 15px; }
  .kl-report-stack .rp-cell-ad img { height: 170px; }
  .kl-report-stack .rp-mini img { height: 74px; }
}