/* compound-keyword (identity build, 15 Oct 2026): the keyword that brought the lead runs from the ad to the lead; the one empty cell left is yours.
   Re-skinned to identity-comp/home-compound-start (the Compound film's finished frame): NO box. The ad is written straight on the pink ground (channel pill, headline with the keyword lit in Muffin Intel
   teal, a white framed photo with the hard shadow), the dotted trail runs from the lit words to the lead, and the lead is a row on the ground (who, the keyword chip with its tick, your dashed cell).
   The rules are the comp's (the `hcs-` rules of that page's style block), renamed to this film's own `ck2-` classes and scoped to the stage; the motion (builder.js, timings, eases, order, data-m roles) is unchanged.
   Colours, shadows and ring tokens come from the ground (`data-ground="pink"` on #compound sets --fg, --fg-2, --hair, --hair-2, --sh) and from site-src/css/kit.css; this file loads before the band's inline css.
   This is the POSTER, the round's last frame (frame 0 is the director's own designed picture, painted from the tweens' `from` values while the stage is unseen). Parts that exist only for the motion are at
   opacity 0 in the poster: the empty dashed cell and the four brackets (Muffin Intel's mark); the mask that draws the trail is in the SVG, and the teal box behind "2 BHK flats" is a node that is lit in the poster.
   Nothing here keeps a layer promoted (no will-change): the round is transform, opacity and SVG dash only and the lead row never moves. */

/* the stage: a plain box on the ground (the comp's .hcs-parts); the kit's stage base (paint containment, clip, isolation, container) is switched off so nothing is cropped and text sits where the comp's sits */
.kl-compound-keyword.kl-stage { position: relative; display: block; width: 100%; margin: 0; padding-top: 22px; line-height: normal; contain: none; overflow: visible; isolation: auto; container-type: normal; }
/* the camera is the aria-hidden wrapper the stage contract asks for; it is no box, so the ad and the lead stay the stage's own blocks */
.kl-compound-keyword .kl-camera { display: contents; position: static; }

/* the ad, written straight on the ground: channel pill, the headline with the keyword lit, the framed picture.
   The pill and the frame share one top line; the dotted trail fills the column under the headline. */
.kl-compound-keyword .ck2-ad { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: stretch; margin-bottom: 6px; }
.kl-compound-keyword .ck2-adw { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.kl-compound-keyword .ck2-tag { display: inline-block; height: 26px; margin: 0; padding: 0 11px; border-radius: 13px; box-shadow: inset 0 0 0 1.5px var(--hair-2); color: var(--fg); font-weight: 700; font-size: 14px; line-height: 26px; letter-spacing: .01em; }
.kl-compound-keyword .ck2-url, .kl-compound-keyword .ck2-d1 { display: none; }
.kl-compound-keyword .ck2-t1 { margin: 12px 0 0; font-weight: 600; font-size: 17px; line-height: 26px; letter-spacing: .01em; color: var(--fg); }
/* the words the keyword came from: inline-block like .k-lane; the teal box behind them is the node .ck2-hl, which the round lights (below) */
.kl-compound-keyword .ck2-t1 mark { position: relative; isolation: isolate; display: inline-block; padding: 0 5px; margin: 0 1px 0 0; border-radius: 4px; background: none; color: var(--ink); font-weight: 700; line-height: 23px; }
.kl-compound-keyword .ck2-ad .k-frame { align-self: start; padding: 5px; }
.kl-compound-keyword .ck2-ad .k-pic { --pw: 92px; --ph: 92px; --pw-d: 116px; --ph-d: 116px; background: #c9b48f; }

/* the trail: the keyword's path from the ad to the lead, dotted. The dots (the comp's path) show through a solid mask path that the timeline draws. */
.kl-compound-keyword .ck2-trail { display: block; position: relative; flex: 1 0 84px; align-self: stretch; margin-top: 6px; }
.kl-compound-keyword .ck2-path { position: absolute; top: 0; height: 100%; left: 15px; width: 46px; overflow: visible; }
.kl-compound-keyword .ck2-path path { fill: none; stroke: var(--fg-2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .5 9; vector-effect: non-scaling-stroke; }
.kl-compound-keyword .ck2-path mask path { stroke: #fff; stroke-width: 24px; stroke-linecap: butt; stroke-dasharray: 1000; stroke-dashoffset: 0; vector-effect: none; }

/* the lead, as a row on the ground. From 768: who, a hairline, then the keyword it matched and your empty cell.
   Phone: the lead is one row, the person and the keyword it matched; your cell sits under it with its owner line */
.kl-compound-keyword .ck2-lead { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 16px; }
.kl-compound-keyword .ck2-who { display: flex; align-items: center; gap: 12px; }
.kl-compound-keyword .ck2-icon { flex: none; width: 30px; height: 30px; fill: var(--fg-2); }
.kl-compound-keyword .ck2-name { font-weight: 700; font-size: 17px; line-height: 22px; letter-spacing: .01em; color: var(--fg); }
.kl-compound-keyword .ck2-meta { display: inline-block; height: 26px; padding: 0 10px; border-radius: 13px; box-shadow: inset 0 0 0 1.5px var(--hair-2); font-weight: 700; font-size: 14px; line-height: 26px; color: var(--fg); }
.kl-compound-keyword .ck2-date, .kl-compound-keyword .ck2-how { display: none; }   /* phone: the date and "Form lead" are off; "Form lead" is back from 768 */
.kl-compound-keyword .ck2-cells { display: contents; }                            /* phone: the two cells join the lead's grid; a row of their own from 768 */
.kl-compound-keyword .ck2-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.kl-compound-keyword .ck2-head { display: none; margin: 0; }                      /* "Keyword matched": desktop only (the trail and the tick show the match) */
.kl-compound-keyword .ck2-kwrow { position: relative; display: inline-block; }
.kl-compound-keyword .ck2-kw { position: relative; display: inline-block; margin: 0; padding: 11px 16px 12px; border-radius: var(--r-2); background: var(--teal); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink), var(--sh); font-weight: 700; font-size: 17px; line-height: 21px; letter-spacing: .01em; }
.kl-compound-keyword .ck2-tk { position: absolute; right: -10px; top: -11px; display: block; width: 22px; height: 22px; }
.kl-compound-keyword .ck2-tk svg { display: block; width: 22px; height: 22px; overflow: visible; }
.kl-compound-keyword .ck2-tk circle { fill: var(--light); stroke: var(--ink); stroke-width: 1.5; }
.kl-compound-keyword .ck2-tk path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000 1000; stroke-dashoffset: 0; }   /* pathLength 1000: a draw in whole px steps would pop */
/* your cell: its owner on a phone and tablet is the 14 px line right above it, with the yellow (you) dot */
.kl-compound-keyword .ck2-you { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: 14px; line-height: 18px; letter-spacing: .01em; color: var(--fg); }
.kl-compound-keyword .ck2-cell--you { grid-column: 1 / -1; margin-top: 24px; }
.kl-compound-keyword .ck2-slot { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 9px 14px 10px; border: 2px dashed var(--ink); border-radius: var(--r-2); color: var(--fg); font-weight: 700; font-size: 17px; line-height: 21px; letter-spacing: .01em; }
.kl-compound-keyword .ck2-sdot { display: none; }                                  /* the cell's own yellow dot: desktop, where the "you" line is the sticker beside the film */
@media (min-width: 360px) {
  .kl-compound-keyword .ck2-lead { grid-template-columns: auto minmax(0, 1fr); row-gap: 40px; }
  .kl-compound-keyword .ck2-cell--you { margin-top: 0; }
}

/* the trail's SVG and the lead row each on their own layer: the trail's mask repaints around the icon and the frame it runs between, and without a layer of their own a repaint leaves a few corner pixels
   5 to 60 levels off the markup's own raster (kit README 16). Neither moves; the round tweens nothing on them (the trail's mask dash apart). */
.kl-compound-keyword .ck2-path, .kl-compound-keyword .ck2-lead, .kl-compound-keyword .ck2-ad .k-frame { will-change: transform; }   /* the lead row too: the keyword chip's hard shadow is repainted when its tween ends, and on a page the stage sits at a fractional offset, so without a layer of its own its bottom edge is a few levels off the poster's raster */

/* motion-only parts (opacity 0 in the poster; frame 0 lights the empty cell by its `from` value):
   the teal box behind "2 BHK flats" is a node of its own (the mark carries no background), so the round can light it by opacity. It sits behind the words (z-index -1 in the mark's own stacking context).
   The empty slot is the chip's own shape, text invisible, drawn as a dashed outline on the chip's own box. */
.kl-compound-keyword .ck2-hl { display: block; position: absolute; inset: 0; z-index: -1; border-radius: 4px; background: var(--teal); box-shadow: inset 0 0 0 1.5px var(--ink); pointer-events: none; }
.kl-compound-keyword .ck2-empty { position: absolute; inset: 0; z-index: 0; display: block; margin: 0; opacity: 0; pointer-events: none; color: transparent; background: none; box-shadow: none; outline: 2px dashed rgba(11, 42, 43, .5); outline-offset: -2px; }

/* the four brackets, Muffin Intel's mark: the hero's (2.5 px teal over a 4.5 px ink keyline, phone 2 over 4), one corner each, absolutely placed by builder.js on the box it frames (the target's border box, 6 px clear all round).
   Arms 19 px (phone 13); they open to that size on the keyword cell and close to the box's own limit (half its short side less 3) on the words, by scale from their own corner. Opacity 0 in the poster: nothing here shows without the round. */
.kl-compound-keyword .ck2-bk { position: absolute; left: 0; top: 0; z-index: 3; display: block; width: 19px; height: 19px; opacity: 0; pointer-events: none; }
.kl-compound-keyword .ck2-bk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kl-compound-keyword .ck2-bk path { fill: none; stroke-linecap: butt; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.kl-compound-keyword .ck2-bkk { stroke: var(--ink); stroke-width: 4.5; }
.kl-compound-keyword .ck2-bkt { stroke: var(--teal); stroke-width: 2.5; }
.kl-compound-keyword .ck2-bk--tl { transform-origin: 0 0; }
.kl-compound-keyword .ck2-bk--tr { transform-origin: 100% 0; }
.kl-compound-keyword .ck2-bk--bl { transform-origin: 0 100%; }
.kl-compound-keyword .ck2-bk--br { transform-origin: 100% 100%; }
@media (max-width: 767px) {
  .kl-compound-keyword .ck2-bk { width: 13px; height: 13px; }
  .kl-compound-keyword .ck2-bkk { stroke-width: 4; }
  .kl-compound-keyword .ck2-bkt { stroke-width: 2; }
}

@media (min-width: 768px) {
  .kl-compound-keyword .ck2-how { display: inline-block; }
  .kl-compound-keyword .ck2-ad { width: 440px; max-width: 100%; }
  .kl-compound-keyword .ck2-trail { flex-basis: 66px; }
  .kl-compound-keyword .ck2-lead { display: block; }
  .kl-compound-keyword .ck2-who { padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
  /* tablet: one row, the chip, your cell, and its owner line after it */
  .kl-compound-keyword .ck2-cells { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
  .kl-compound-keyword .ck2-cell--you { flex-direction: row-reverse; align-items: center; gap: 14px; }
}
@media (min-width: 1180px) {
  .kl-compound-keyword.kl-stage { padding-top: 30px; }
  .kl-compound-keyword .ck2-ad { width: 470px; column-gap: 22px; margin-bottom: 4px; }
  .kl-compound-keyword .ck2-tag { height: 28px; padding: 0 12px; border-radius: 14px; font-size: 15px; line-height: 28px; }
  .kl-compound-keyword .ck2-url { display: block; margin: 14px 0 0; font-weight: 600; font-size: 15px; line-height: 20px; color: var(--fg-2); }
  .kl-compound-keyword .ck2-t1 { margin-top: 6px; font-size: 22px; line-height: 32px; }
  .kl-compound-keyword .ck2-t1 mark { line-height: 29px; }
  .kl-compound-keyword .ck2-d1 { display: block; margin: 4px 0 0; font-weight: 500; font-size: 16px; line-height: 22px; color: var(--fg-2); }
  .kl-compound-keyword .ck2-trail { flex-basis: 86px; margin-top: 2px; }
  .kl-compound-keyword .ck2-path { left: 60px; width: 218px; transform: scaleX(-1); }
  .kl-compound-keyword .ck2-lead { width: 520px; margin-left: auto; }
  .kl-compound-keyword .ck2-icon { width: 34px; height: 34px; }
  .kl-compound-keyword .ck2-name { font-size: 21px; line-height: 26px; }
  .kl-compound-keyword .ck2-meta { height: 30px; padding: 0 12px; border-radius: 15px; font-size: 15px; line-height: 30px; }
  .kl-compound-keyword .ck2-date { display: inline-block; }
  .kl-compound-keyword .ck2-cells { flex-wrap: nowrap; align-items: flex-end; margin-top: 20px; }
  .kl-compound-keyword .ck2-cell { gap: 16px; }
  .kl-compound-keyword .ck2-head { display: block; }
  .kl-compound-keyword .ck2-you { display: none; }
  .kl-compound-keyword .ck2-sdot { display: inline-block; }
  .kl-compound-keyword .ck2-kw { padding: 12px 18px 13px; font-size: 19px; line-height: 23px; }
  .kl-compound-keyword .ck2-slot { gap: 10px; padding: 10px 16px 11px; font-size: 19px; line-height: 23px; }
}