/* Products index (B1, round 14): the catalogue beside its stack. Prefix pi-. Type roles only. */
.pi-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.pi-list{grid-column:1 / 7}
.pi-group{padding:clamp(48px,5vw,72px) 0;border-top:1px solid var(--line)}
.pi-group:first-child{border-top:0;padding-top:0}
.pi-gh .eyebrow{margin-bottom:16px}
.pi-gh .h2{max-width:10em}
.pi-rows{margin-top:30px}
.pi-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;align-items:center;padding:18px 0 18px 0;border-top:1px solid var(--line);transition:padding .4s var(--ease)}
.pi-row h3{color:#fff}
.pi-row p{color:var(--fg2);margin-top:4px;max-width:26em;transition:color .3s}
.pi-row .go{font:540 var(--s-body)/1.4 var(--f);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.4)}
.pi-row::before{content:'';position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--verm);transition:width .5s var(--ease)}
.pi-row.is-cur::before{width:56px}
.pi-row.is-cur p,.pi-row:hover p{color:#fff}
.pi-row:hover .go,.pi-row:focus-visible .go{text-decoration-color:#fff}

/* the stack, pinned beside the rows */
.pi-fig{grid-column:7 / 13;position:relative}
.pi-pin{position:sticky;top:calc(var(--navh) + 20px);height:min(760px,calc(100vh - var(--navh) - 40px));border-radius:18px;background:#f3f4f4;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.pi-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pi-labs{position:absolute;inset:0;pointer-events:none}
.pi-lab{position:absolute;left:0;top:0;white-space:nowrap;font:500 var(--s-small)/1.3 var(--f);color:rgba(245,245,243,.86);opacity:0;transition:opacity .6s var(--ease) .9s,color .3s}
.pi-lab:not(.pi-lab--f){font:560 var(--s-small)/1.2 var(--f);color:var(--ink)}
.pi-lab:not(.pi-lab--f)::after{display:none}
.pi-lab::after{content:'';position:absolute;left:8px;top:100%;width:1px;height:var(--lead,14px);margin-top:2px;background:rgba(14,15,15,.45)}
.pi-lab.on{color:var(--ink)}
.pi-lab.on::after{background:var(--verm)}
.pi-lab--f{font:var(--w-h3) var(--s-lede)/1.25 var(--f);letter-spacing:-.012em;color:var(--ink)}
.pi-lab--f::after{left:auto;right:-20px;top:50%;width:14px;height:1px;margin:0}
.pi-svg .pi-floor{opacity:0;transform:translateY(-34px);transition:opacity .9s var(--ease),transform 1.3s var(--spring)}
.pi-svg .pi-floor[data-f="1"]{transition-delay:.18s}
.pi-svg .pi-floor[data-f="2"]{transition-delay:.36s}
.pi-svg .pi-posts{opacity:0;transition:opacity 1s .6s}
.pi-svg.in .pi-floor,.pi-svg.in .pi-posts{opacity:1;transform:none}
.pi-fig:has(.pi-svg.in) .pi-lab{opacity:1}
.pi-tile.on .pi-edge{stroke:var(--verm);stroke-width:1.8}
.pi-tile.on .pi-side{stroke:var(--verm)}
.pi-foot.on{stroke:var(--verm);stroke-dasharray:none;stroke-width:1.6}
.pi-mini{display:none}
.pi-miniw{display:none;position:relative}
.pi-ml{position:absolute;left:0;top:0;text-align:center;font:560 var(--s-small)/1.2 var(--f);color:var(--ink);pointer-events:none}

@media (max-width:1100px){
  .pi-list{grid-column:1 / 7}
  .pi-gh .h2{max-width:none}
}
@media (max-width:760px){
  .pi-grid{display:block}
  .pi-fig{display:none}
  .pi-miniw{display:block;margin:24px 0 6px;padding:10px;border-radius:14px;background:#f3f4f4}
  .pi-mini{display:block;width:100%;height:auto;overflow:hidden}
  .pi-mini .pi-floor,.pi-mini .pi-posts{opacity:0;transform:translateY(-16px);transition:opacity .8s var(--ease),transform 1s var(--spring)}
  .pi-mini.in .pi-floor,.pi-mini.in .pi-posts{opacity:1;transform:none}
  .pi-row{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .pi-row .go{justify-self:start;min-height:40px;display:inline-flex;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  .pi-svg .pi-floor,.pi-svg .pi-posts,.pi-lab,.pi-mini .pi-floor,.pi-mini .pi-posts{transition:none!important}
}

/* the opening: the lede's three needs as the site's three-part table (white line on top), each with its tier and the products to start
   with as pills; nothing to click to see them (r17, client 303) */
.open--words .pi-need{position:relative;z-index:1;margin-top:clamp(48px,5vw,72px)}
.pi-need .steps{margin-top:0}
.pi-need .pi-go{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:20px;max-width:none}
/* r19 (client 379): the links are the site's text links (.tlink in site.css), no longer pills */
@media (max-width:760px){.pi-need .pi-go{margin-top:18px}}