/* ═══════════════════════════════════════════════════════════════════════════
   WALL — the landing's bento (wall.js). A plain section that pins while the
   scroll brings the wall in through the optics; on narrow screens, the
   section as it is with the cards in a column under it. Nothing here relies
   on the old .bn-* rules.
   ═══════════════════════════════════════════════════════════════════════════ */
.lx-bn.wl{display:block;place-items:normal;min-height:0;height:var(--wl-run,300vh);padding:0;overflow:visible;background:#FFFFFF}
.wl-stage{position:sticky;top:0;width:100%;height:100vh;overflow:hidden;background:#FFFFFF}
.wl-cv{position:absolute;left:0;top:0;width:100%;height:100%;display:block}

/* the section's own words: in the page until the canvas has them, and for anything that reads the page */
.wl-intro{position:absolute;inset:0;pointer-events:none;color:#0A0A0A;transition:opacity .2s ease-out}
.wl-intro > *{position:absolute;left:0;right:0;margin:0;text-align:center;line-height:1;white-space:nowrap}
.wl-logos{display:flex;justify-content:center;align-items:center;gap:var(--wl-lg,28px)}
.wl-logos .logo{display:block;width:var(--wl-ls,30px);height:var(--wl-ls,30px)}
.wl-h{font-size:var(--wl-hs,48px);font-weight:500;letter-spacing:-.03em}
.wl-p{font-size:var(--wl-ss,17px);font-weight:400;color:rgba(10,10,10,.5)}
.wl.wl-ready .wl-intro{opacity:0}

/* the download card is the page's button wherever the wall has put it */
.wl-dl{position:absolute;left:0;top:0;border-radius:10px;cursor:pointer;z-index:2}
.wl-dl:focus-visible{outline:2px solid #0A0A0A;outline-offset:3px}
.wl-vh{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wl-col{display:none}

/* narrow and portrait: the section, then the cards in a column of two on the wall's board */
.lx-bn.wl.wl-stack{height:auto}
.wl-stack .wl-stage{position:relative;height:auto;overflow:visible}
.wl-stack .wl-cv,.wl-stack .wl-dl{display:none}
.wl.wl-stack .wl-intro{position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;padding:72px 20px 36px;opacity:1}
.wl-stack .wl-intro > *{position:static;white-space:normal}
.wl-stack .wl-h{margin-top:22px;line-height:1.1;text-wrap:balance;max-width:16ch}
.wl-stack .wl-p{margin-top:14px;line-height:1.5;max-width:34ch}
.wl-stack .wl-col{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 16px 56px;padding:0;background:transparent}
.wl-sc{position:relative;display:block;min-width:0;border-radius:10px;overflow:hidden;opacity:0;transform:translateY(12px);
  transition:opacity .25s ease-out,transform .25s ease-out}
.wl-sc.on{opacity:1;transform:none}
.wl-sc.w2{grid-column:span 2}
.wl-sc canvas{display:block;width:100%;height:100%}
a.wl-sc:focus-visible{outline:2px solid #0A0A0A;outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  .lx-bn.wl{height:100vh}
  .wl-intro{transition:none}
  .wl-sc{opacity:1;transform:none;transition:none}
}