/* Rivalshelf hero, live labelling on the drifting wall (hero-live.js).
   Wide screens: the same tilted, drifting wall with tiles about 1.5x larger, so 3 to 4 columns show at 1440.
   Phones and tablets (1100 px and below): 2 bigger columns, so the pages can be read.
   Everything a label is made of (outline, leader, dot, chip) lives inside its own tile and rides its tilt, so a
   chip can never sit on another tile. Only opacity, transforms and SVG stroke-dashoffset animate. */
.wall.hl-big .wall-plane{width:165%}
.wall.hl-big .wall-col{gap:28px;padding-bottom:28px}
.wall.hl-big .wall-plane{gap:28px}
@media (max-width:1100px){
  .hero-copy{padding-bottom:590px}
  .wall.hl-big{left:4%;right:4%;height:580px}
  .wall.hl-big .wall-plane{width:100%;gap:22px}
  .wall.hl-big .wall-col{gap:22px;padding-bottom:22px}
  .wall.hl-big .wall-col:nth-child(n+3){display:none}
}
@media (max-width:760px){
  .hero-copy{padding-bottom:540px}
  .wall.hl-big{left:1%;right:-2%;height:530px}
  .wall.hl-big .wall-plane{gap:16px}
  .wall.hl-big .wall-col{gap:16px;padding-bottom:16px}
}
/* tiles do not clip, so a chip with no room on its tile can sit just above it, in the gap; the page keeps its
   rounded top corners on the image */
.wcard.hl-t{position:relative;overflow:visible}
.wcard.hl-t>img{border-radius:var(--r-cap) var(--r-cap) 0 0}
.hl{position:absolute;left:0;top:0;width:100%;z-index:1;pointer-events:none;overflow:visible}
.hl svg{position:absolute;left:0;top:0;overflow:visible}
.hl .hh{fill:none;stroke:#fff;stroke-opacity:.9;stroke-linejoin:round}
.hl .ho{fill:none;stroke:var(--accent,#2B3FE6);stroke-linejoin:round}
.hl .hk{stroke:var(--accent,#2B3FE6);stroke-linecap:round;fill:none}
.hl .hd{fill:var(--accent,#2B3FE6);stroke:#fff}
.hl-pr{position:absolute;left:0;top:0;width:100px;height:0;visibility:hidden}
/* chip: compact, brand blue; its size is set in tile units by hero-live.js so it reads 11.5 px on screen */
.hl-c{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform,opacity}
.hl-c b{display:block;background:var(--accent,#2B3FE6);color:#fff;font-family:var(--body,sans-serif);font-weight:600;
  line-height:1.2;letter-spacing:.005em;padding:.2em .55em .3em;border-radius:.5em;
  box-shadow:0 0 0 .13em #fff,0 .5em 1.2em -.6em rgba(20,30,90,.6)}
/* no pause on hover */

/* The wall stays hidden until its stores are final (picked, the pages on screen planned, their images decoded), then
   fades in once: no page ever switches to another store in view. Only with motion on (.mo); hero-live.js shows it
   after 4 s whatever happens. */
.mo .wall{opacity:0}
.mo .wall.hl-ready{opacity:1;transition:opacity 1.1s cubic-bezier(.2,.7,.2,1)}