/* ============================================================================
   ONE STACK — home page, under "Your standards" (after the Relevance AI home page's
   "one stack" section, in the site's own art and words; no other product is named).

   Left, an isometric stack: eight thin glass planes (hairline edges) build up from the bottom when the section
   arrives, and a lit glass plane floats above them carrying the icon of the capability that
   is lit. Right, the nine capabilities of the Office; each is lit in turn on a 19.8s
   loop (2.2s each), with the Office page it lives on at the right.

   Builder-safe: classes only, no keyframes (they are the STACK block in motion.css),
   every picture a real file (assets/art/stk-*.svg, assets/icons/stk-*.svg). The art
   is positioned in % of a 380x527 box, so it scales with no script. With JS off, or
   motion reduced, it is a finished picture: the whole stack, the first row lit.
   ========================================================================== */

.stk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}

/* ---- the art: a 380x527 box; every position below is a % of it -------------- */
.stk-art{position:relative;width:100%;max-width:400px;aspect-ratio:380/527;margin:0 auto}
.stk-art>*{position:absolute;display:block}
/* the glass planes, 286x158 each, 26 apart: L1 at the foot to L8 at the top */
.stk-g{left:12.37%;width:75.26%;height:29.98%;opacity:.95;filter:drop-shadow(0 6px 10px rgba(41,70,182,.06))}
.stk-g1{top:70.02%} .stk-g2{top:65.09%} .stk-g3{top:60.15%} .stk-g4{top:55.22%}
.stk-g5{top:50.28%} .stk-g6{top:45.35%} .stk-g7{top:40.42%} .stk-g8{top:35.48%}
/* the soft royal light between the floating slab and the stack */
.stk-glow{left:10.5%;top:29.79%;width:79%;height:26.57%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(65,105,225,.08),rgba(65,105,225,.025) 55%,transparent 100%)}
/* the floating royal slab and its icons move as one */
.stk-lift{left:12.37%;top:0.76%;width:75.26%;height:29.98%}
.stk-top{position:absolute;inset:0;display:block;width:100%;height:100%;filter:drop-shadow(0 14px 20px rgba(41,70,182,.18))}
/* the shooting signal: a canvas over the whole art, drawn by the page script */
.stk-art>.stk-sig{inset:0;width:100%;height:100%;pointer-events:none}
/* an icon lies flat on the top face: turned 45deg, then squashed to the 2:1 face */
.stk-i{position:absolute;left:50%;top:45.57%;display:block;width:19%;aspect-ratio:1;opacity:0;
  transform:translate(-50%,-50%) scaleY(.5) rotate(45deg)}
.stk-i1{opacity:1}

/* ---- the list: a white card, as the site's cards (.pc, .step) --------------------- */
.stk-list{margin:0;padding:8px;list-style:none;border:1px solid var(--line);border-radius:10px;background:#fff;
  box-shadow:0 24px 48px -32px rgba(2,37,79,.22)}
.stk-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 16px;border-radius:6px;
  border-bottom:1px solid var(--line);font:600 15px/1.35 var(--web);color:var(--navy)}
.stk-row:last-child{border-bottom:0}
.stk-row small{flex:0 0 auto;font:400 13.5px var(--web);color:var(--t4)}
/* lit: a pale royal pill with royal text (the first row when nothing moves) */
.stk-r1{background:#eef2fc;box-shadow:inset 0 0 0 1px rgba(41,70,182,.12);color:var(--btn)}

@media (max-width:991px){
  .stk{grid-template-columns:minmax(0,1fr);gap:40px}
  .stk-art{max-width:320px}
}
@media (max-width:479px){
  .stk-row{padding:12px 12px;font-size:14px}
  .stk-row small{font-size:12.5px}
}