/* ===========================================================================
   Enterprise foundation — a dark technical slab.
   Four independent matrices — Perception × Memory × Orchestration × Platform —
   read left to right as one equation. Each matrix is its own bracketed
   column: a strong purple rule, a small consistent node icon, then the
   capability itself, closed with a dotted "and more" row (top 3/4 only,
   not the whole list). Behind it all, a very faint neural network with
   activation travelling left to right (stack.js) — unchanged, the client
   liked it. Every selector is namespaced .st-* and lives under .stack.
   =========================================================================== */

.stack{
 --st-ground:#1c1924;
 --st-ink:#f4f0fb;
 --st-ink-dim:#b3a6c6;
 --st-muted:#8d81a1;
 --st-line:#ffffff1f;
 --st-purple:#a983f4;
 --st-ease:cubic-bezier(.16,1,.3,1);

 position:relative;
 z-index:2;
 isolation:isolate;
 overflow:hidden;
 padding:clamp(76px,9vw,128px) 5vw clamp(84px,10vw,136px);
 background:
   radial-gradient(120% 90% at 12% -10%,#2f2145 0%,transparent 62%),
   radial-gradient(90% 80% at 100% 110%,#291a3d 0%,transparent 58%),
   var(--st-ground);
 color:var(--st-ink);
}

/* the icon sprite carries no box of its own */
.st-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* the neural canvas sits behind everything and never takes a click */
.st-canvas{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 display:block;
 pointer-events:none;
 z-index:0;
}

.st-inner{
 position:relative;
 z-index:1;
 width:100%;
 max-width:1240px;
 margin:0 auto;
}

/* ---------- head ---------- */

.st-head{position:relative;max-width:680px}

/* the glyph-local shadow keeps contrast even when a pulse passes underneath */
.st-eyebrow,.st-h,.st-sub{text-shadow:0 1px 16px #14111ccc}

.st-eyebrow{
 margin:0 0 18px;
 font-family:ui-monospace,Menlo,monospace;
 font-size:10px;
 letter-spacing:.18em;
 text-transform:uppercase;
 color:#a78ad6;
}

.st-h{
 margin:0;
 font-size:clamp(32px,4.1vw,54px);
 font-weight:550;
 line-height:1.05;
 letter-spacing:-.045em;
 color:var(--st-ink);
}

.st-sub{
 margin:16px 0 0;
 font-size:clamp(14px,1.2vw,16px);
 line-height:1.6;
 color:var(--st-ink-dim);
}

/* ---------- the equation: matrix × matrix × matrix × matrix ---------- */

.st-eq-wrap{
 margin-top:clamp(44px,5vw,68px);
 overflow-x:auto;
 overflow-y:hidden;
 -webkit-overflow-scrolling:touch;
 /* room so the brackets and hover states never get clipped by the scroller */
 padding:4px 2px 14px;
}

.st-eq{
 display:flex;
 align-items:stretch;
 gap:clamp(10px,1.6vw,20px);
 width:max-content;
 min-width:100%;
}

.st-matrix{
 display:flex;
 flex-direction:column;
 flex:1 1 0;
 min-width:212px;
 max-width:330px;
 margin:0;
}

.st-matrix-head{
 margin:0 0 18px;
 text-align:center;
}

.st-matrix-title{
 display:block;
 font-size:clamp(20px,2.3vw,26px);
 font-weight:650;
 letter-spacing:-.02em;
 line-height:1.08;
 color:var(--st-ink);
}

/* the bracketed body of one matrix */
.st-matrix-frame{
 position:relative;
 flex:1;
 display:flex;
 align-items:stretch;
 padding:0 15px;
}

.st-bk{
 position:absolute;
 top:0;
 bottom:0;
 width:9px;
 border:1.5px solid #b98ffc85;
 border-radius:3px;
}
.st-bk-l{left:0;border-right:0;border-radius:5px 0 0 5px}
.st-bk-r{right:0;border-left:0;border-radius:0 5px 5px 0}

.st-rows{
 flex:1;
 list-style:none;
 margin:0;
 padding:2px 0;
 display:flex;
 flex-direction:column;
}

.st-row{
 display:grid;
 grid-template-columns:2px 20px 1fr;
 align-items:center;
 column-gap:13px;
 padding:14px 1px;
 border-radius:6px;
 transition:background .35s var(--st-ease);
}
.st-row + .st-row{border-top:1px solid var(--st-line)}

.st-row:hover{background:#ffffff09}

/* the strong internal column line the client asked for — this is the
   deliberate design feature, not a hairline */
.st-vline{
 align-self:stretch;
 width:2px;
 border-radius:1px;
 background:var(--st-purple);
 opacity:.6;
 transition:opacity .35s var(--st-ease);
}
.st-row:hover .st-vline{opacity:.9}

/* one consistent line-icon per capability, in the brand purple */
.st-ico{
 width:19px;
 height:19px;
 color:var(--st-purple);
 opacity:.9;
 flex:0 0 auto;
}

.st-val{
 font-size:clamp(15.5px,1.5vw,17.5px);
 font-weight:480;
 line-height:1.34;
 letter-spacing:-.012em;
 color:var(--st-ink);
 overflow-wrap:break-word;
}

/* the closing "and more" row — dotted rule, dimmer dot-mark, quieter label.
   Signals these are the top picks, not the whole list. */
.st-row-more{padding-top:12px;padding-bottom:4px}
.st-row-more:hover{background:transparent}

.st-vline-more{
 background:none;
 background-image:repeating-linear-gradient(to bottom,var(--st-purple) 0 3px,transparent 3px 7px);
 opacity:.5;
}

.st-ico-dots{
 width:19px;
 height:7px;
 color:var(--st-ink-dim);
 opacity:.8;
}

.st-more{
 font-size:13px;
 font-style:italic;
 letter-spacing:-.005em;
 color:var(--st-ink-dim);
}

/* the × column: a ghost header of the exact same height as a real matrix
   head, then a frame that centres the operator inside the leftover space —
   the same leftover space a matrix's bracket occupies, so the × lands on
   the matrices' true centre line regardless of header or row-count height. */
.st-op-col{
 display:flex;
 flex-direction:column;
 flex:0 0 auto;
}

.st-op-ghost{visibility:hidden}

.st-op-frame{
 flex:1;
 display:flex;
 align-items:center;
 justify-content:center;
}

.st-op{
 font-family:ui-monospace,Menlo,monospace;
 font-size:clamp(20px,2.2vw,26px);
 line-height:1;
 color:var(--st-purple);
 opacity:.8;
 user-select:none;
}

.st-tail{
 margin:clamp(26px,3.2vw,38px) 0 0;
 text-align:center;
 font-size:13.5px;
 color:var(--st-ink-dim);
}

/* ---------- phone: same left-to-right equation, its own scroll container ---------- */

@media(max-width:760px){
 .stack{padding:clamp(64px,12vw,86px) 5vw clamp(72px,13vw,96px)}
 /* Phone audit: the row was a sideways scroller with nothing to say so —
    the second matrix showed as "Memo" and a clipped row, and read as broken.
    The four matrices sit two to a row here; the × and = operators between
    them come off, since the wrap has no line for them to sit on. */
 .st-eq-wrap{margin-top:30px;overflow:visible;padding:0}
 .st-eq{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:auto;min-width:0}
 .st-op-col{display:none}
 .st-matrix{min-width:0}
 .st-matrix-title{font-size:19px}
 .st-op{font-size:20px}
 .st-row{padding:11px 1px}
 .st-val{font-size:15px}
 .st-ico{width:17px;height:17px}
}

/* ---------- reduced motion ---------- */

@media(prefers-reduced-motion:reduce){
 .st-row,.st-vline{transition:none}
}

/* ===========================================================================
   Review round: icons move from the rows to the headings.

   Client: "Remove the icons from the individual elements in perception,
   memory, etc., and instead have icons for the headings", "Remove the lines
   in icons so the text is clear", and replace the "And more" row with a
   centred rule. The per-row icon and the purple vertical rule are gone from
   the markup, so the row is now a single column and the label leads.
   =========================================================================== */

.st-row{grid-template-columns:minmax(0,1fr);column-gap:0}

/* the heading carries the icon now, centred above its column */
.st-matrix-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.st-head-ico{
  width:clamp(20px,2vw,24px);
  height:clamp(20px,2vw,24px);
  color:var(--st-purple);
  flex:none;
}
.st-matrix-title{display:inline-block}

/* "And more" becomes a quiet centred rule: the row still closes the column,
   without a label competing with the capabilities above it */
.st-row-more{padding:16px 1px 14px}
.st-more-rule{
  display:block;
  width:44px;
  height:2px;
  margin:0 auto;
  border-radius:1px;
  background:linear-gradient(90deg,transparent,#b98ffc9e,transparent);
}

/* The client reported the right-hand bracket missing on the Platform column.
   Every matrix ships both halves, so the cause is the frame's right padding
   being eaten at narrow widths — pin both halves inside the frame and give
   the frame room for them. */
.st-matrix-frame{padding:0 17px}
.st-bk{width:10px}
.st-bk-l{left:0}
.st-bk-r{right:0}

/* RD round 7, note 13 — every section head on the page is centred and set at
   the shared --gv-h2, this one included, so the eye keeps one anchor all the
   way down. (The matrices below stay exactly as they are.) */
.st-head{max-width:820px;margin-inline:auto;text-align:center}
.st-eyebrow{font-size:var(--gv-eyebrow);letter-spacing:.16em;font-weight:600}
.st-h{font-size:var(--gv-h2);font-weight:700}
.st-sub{margin-inline:auto;max-width:56ch}