/* pillars: "No table left waiting." + three columns with chunky geometric icons. */
.pl-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: end; margin-bottom: clamp(56px, 6.5vw, 96px); }
.pl-title { font-size: clamp(40px, 4.6vw, 72px); line-height: 1.02; max-width: 9.5em; }
.pl-sub { max-width: 430px; justify-self: end; font-size: 17px; line-height: 1.55; padding-bottom: 6px; }

.pl-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.6vw, 56px); }
.pl-col { position: relative; padding-top: 34px; }
.pl-rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.pl-rule i { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(90deg, rgba(110, 147, 247, 0), rgba(110, 147, 247, 1) 70%, rgba(255, 255, 255, 1)); transform: translateX(-110%); }
.pl-col.is-on .pl-rule i { animation: plSweep 1.6s var(--ease-out) forwards; animation-delay: var(--pd, 0ms); }
@keyframes plSweep { 0% { transform: translateX(-110%); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(310%); opacity: 0; } }

.pl-ic { display: block; width: 40px; height: 40px; overflow: visible; }
.pl-p { fill: #fff; transform-box: fill-box; transform-origin: 50% 50%; transition: transform .9s var(--ease-out), opacity .7s var(--ease-out), fill .4s var(--ease); }
.pl-name { margin-top: 30px; font-size: 22px; letter-spacing: -0.015em; }
.pl-body { margin-top: 12px; color: var(--mist); font-size: 15.5px; line-height: 1.6; max-width: 34ch; }
.pl-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--fg-2); font: 500 11px/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); transition: color .25s var(--ease), border-color .25s var(--ease); }
.pl-link .arr { transition: transform .3s var(--ease-out); }
.pl-link:hover, .pl-link:focus-visible { color: #fff; border-color: var(--blue-2); }
.pl-link:hover .arr { transform: translateX(3px); }

/* icon start states (before the column is in view) */
.js .pl-col:not(.is-on) .pl-p--tl { transform: translate(-5px, -5px); opacity: 0; }
.js .pl-col:not(.is-on) .pl-p--tr { transform: translate(5px, -5px); opacity: 0; }
.js .pl-col:not(.is-on) .pl-p--bl { transform: translate(-5px, 5px); opacity: 0; }
.js .pl-col:not(.is-on) .pl-p--br { transform: translate(5px, 5px); opacity: 0; }
.js .pl-col:not(.is-on) .pl-ic--read .pl-p--core { transform: rotate(-90deg) scale(0.2); opacity: 0; }
.js .pl-col:not(.is-on) .pl-p--src { transform: translateX(-6px); opacity: 0; }
.js .pl-col:not(.is-on) .pl-p--w1 { transform: translateX(-8px); opacity: 0; }
.js .pl-col:not(.is-on) .pl-p--w2 { transform: translateX(-10px); opacity: 0; }
.js .pl-col:not(.is-on) .pl-p--roof { transform: translateY(-8px); opacity: 0; }
.js .pl-col:not(.is-on) .pl-p--wl, .js .pl-col:not(.is-on) .pl-p--wr { transform: scaleY(0.2); opacity: 0; }
.js .pl-col:not(.is-on) .pl-ic--prem .pl-p--core { transform: scale(0.2); opacity: 0; }
/* staggered settle */
.pl-col.is-on .pl-p--tr, .pl-col.is-on .pl-p--w1, .pl-col.is-on .pl-p--wl { transition-delay: calc(var(--pd, 0ms) + 90ms); }
.pl-col.is-on .pl-p--br, .pl-col.is-on .pl-p--w2, .pl-col.is-on .pl-p--wr { transition-delay: calc(var(--pd, 0ms) + 180ms); }
.pl-col.is-on .pl-p--bl { transition-delay: calc(var(--pd, 0ms) + 270ms); }
.pl-col.is-on .pl-p--core { transition-delay: calc(var(--pd, 0ms) + 360ms); }
.pl-col.is-on.is-settled .pl-p { transition-delay: 0ms; }

/* hover / tap: each icon acts out its idea */
.pl-col.is-ping .pl-p--tl { transform: translate(2px, 2px); }
.pl-col.is-ping .pl-p--tr { transform: translate(-2px, 2px); }
.pl-col.is-ping .pl-p--bl { transform: translate(2px, -2px); }
.pl-col.is-ping .pl-p--br { transform: translate(-2px, -2px); }
.pl-col.is-ping .pl-ic--read .pl-p--core { transform: rotate(90deg); fill: var(--blue-2); }
.pl-col.is-ping .pl-p--src { fill: var(--blue-2); }
.pl-col.is-ping .pl-p--w1 { animation: plWave .9s var(--ease-out) both; }
.pl-col.is-ping .pl-p--w2 { animation: plWave .9s var(--ease-out) .14s both; }
@keyframes plWave { 0% { transform: translateX(-4px); opacity: 0.25; } 55% { transform: translateX(1.5px); opacity: 1; } 100% { transform: none; opacity: 1; } }
.pl-col.is-ping .pl-p--roof { transform: translateY(-2.5px); }
.pl-col.is-ping .pl-ic--prem .pl-p--core { transform: scale(0.82); fill: var(--blue-2); }

@media (max-width: 900px) {
  .pl-head { grid-template-columns: 1fr; gap: 20px; }
  .pl-sub { justify-self: start; }
  .pl-cols { grid-template-columns: 1fr; gap: 44px; }
  .pl-body { max-width: 46ch; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .pl-body { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-p { transition: none; }
  .pl-col .pl-rule i { display: none; }
  .js .pl-col .pl-p { transform: none !important; opacity: 1 !important; animation: none !important; }
}