/* ============================================================
   BUILD WITH ASGARD — page-specific components
   Demand side. Builds on asgard.css tokens & primitives.
   ============================================================ */

/* ---------- hero variant: build / program framing ---------- */
.hero--build .hero-grid{grid-template-columns:1.12fr .88fr}
.hero-stages{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hero-stages .hb{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-mid);border:1px solid var(--ink-line);padding:8px 13px;background:#0a0e1680;
  display:inline-flex;align-items:center;gap:9px;
}
.hero-stages .hb::before{content:"";width:5px;height:5px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.hero-stages .hb.is-core{border-color:color-mix(in oklab,var(--accent) 45%,var(--ink-line));color:var(--t-hi)}

/* request-scoping console floating in hero */
.req{
  position:relative;border:1px solid var(--ink-line-2);
  background:linear-gradient(180deg,#0b0f18,#080b12);box-shadow:0 40px 110px -54px #000;
}
.req .req-bar{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--ink-line);background:#0c111b}
.req .req-bar .ttl{font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t-mid)}
.req .req-bar .live{margin-left:auto;font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;color:var(--accent-hi);display:flex;align-items:center;gap:6px}
.req .req-bar .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:blink 1.6s infinite}
.req-body{padding:18px;display:grid;gap:14px}
.req-head{border:1px solid var(--ink-line);background:#0a0e16;padding:15px 16px;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center}
.req-head .rref{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;color:var(--accent-hi)}
.req-head .rtitle{font-size:.95rem;color:var(--t-hi);font-weight:600}
.req-head .rmeta{grid-column:1/2;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t-lo)}
.req-head .rstage{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi);border:1px solid color-mix(in oklab,var(--gold) 40%,transparent);padding:5px 9px;justify-self:end;white-space:nowrap}
.req-steps{display:grid;gap:0;border:1px solid var(--ink-line);background:#0a0e16}
.req-step{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:13px 15px;border-bottom:1px solid var(--ink-line)}
.req-step:last-child{border-bottom:none}
.req-step .rs-ic{width:20px;height:20px;border:1px solid color-mix(in oklab,var(--accent) 55%,var(--ink-line));display:grid;place-items:center;color:var(--accent-hi);font-size:.75rem;flex-shrink:0}
.req-step.is-now .rs-ic{border-color:color-mix(in oklab,var(--gold) 55%,var(--ink-line));color:var(--gold-hi)}
.req-step .rs-t{font-size:.85rem;color:var(--t);line-height:1.35}
.req-step .rs-v{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-hi);white-space:nowrap}
.req-step.is-now .rs-v{color:var(--gold-hi)}

/* ============================================================
   VALUE PILLARS (reuses .pillars / .pillar from partner.css scope —
   redeclared here so this page is independent of partner.css)
   ============================================================ */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:62px}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}
.pillar{
  position:relative;border:1px solid var(--ink-line);
  background:linear-gradient(180deg,#0c111b,#0a0e16);
  padding:40px 36px;min-height:320px;display:flex;flex-direction:column;
  transition:.42s var(--ease);overflow:hidden;
}
.pillar::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border:1px solid var(--ink-line);transform:rotate(45deg);opacity:.4;transition:.42s var(--ease)}
.pillar:hover{border-color:var(--ink-line-2);transform:translateY(-4px)}
.pillar:hover::after{border-color:color-mix(in oklab,var(--accent) 40%,var(--ink-line));opacity:.7}
.pillar .corner{position:absolute;width:11px;height:11px;border-color:var(--accent);opacity:0;transition:opacity .4s var(--ease);z-index:2}
.pillar:hover .corner{opacity:.9}
.pillar .pn{font-family:var(--mono);font-size:.75rem;letter-spacing:.2em;color:var(--accent-hi);position:relative;z-index:1}
.pillar h3{font-size:clamp(1.5rem,2.4vw,1.95rem);font-stretch:112%;margin-top:20px;letter-spacing:-.025em;position:relative;z-index:1}
.pillar .lead{color:var(--gold-hi);font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;margin-top:12px;text-transform:uppercase;position:relative;z-index:1}
.pillar p{color:var(--t-mid);margin-top:16px;font-size:.96rem;line-height:1.62;position:relative;z-index:1;max-width:46ch}
.pillar .metric{margin-top:auto;padding-top:26px;display:flex;align-items:baseline;gap:14px;border-top:1px solid var(--ink-line);position:relative;z-index:1}
.pillar .metric b{font-weight:800;font-size:2.1rem;color:var(--t-hi);font-stretch:112%;letter-spacing:-.02em}
.pillar .metric b .u{color:var(--accent-hi);font-size:1.1rem}
.pillar .metric span{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t-lo);line-height:1.5}

/* ============================================================
   AGNOSTIC MATRIX — domains / materials & processes / stages
   ============================================================ */
.agnostic{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:54px;border:1px solid var(--ink-line);background:linear-gradient(180deg,#0c111b,#0a0e16)}
@media(max-width:820px){.agnostic{grid-template-columns:1fr}}
.ag-col{padding:34px 32px;border-right:1px solid var(--ink-line)}
.ag-col:last-child{border-right:none}
@media(max-width:820px){.ag-col{border-right:none;border-bottom:1px solid var(--ink-line)}.ag-col:last-child{border-bottom:none}}
.ag-col .ah{font-family:var(--mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t-lo);display:block}
.ag-col h4{font-size:1.18rem;font-stretch:110%;margin-top:12px;letter-spacing:-.02em}
.ag-col ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.ag-col li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:.92rem;color:var(--t);line-height:1.4}
.ag-col li::before{content:"";width:6px;height:6px;margin-top:7px;background:var(--accent);box-shadow:0 0 8px var(--accent);flex-shrink:0}

/* ============================================================
   CAPEX PATHS — build it yourself vs build with Asgard
   ============================================================ */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:54px}
@media(max-width:820px){.paths{grid-template-columns:1fr}}
.path{position:relative;border:1px solid var(--ink-line);background:linear-gradient(180deg,#0b0f18,#090d14);padding:36px 34px;display:flex;flex-direction:column;transition:.42s var(--ease)}
.path.is-asgard{border-color:color-mix(in oklab,var(--accent) 45%,var(--ink-line));background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 9%,#0c111b),#0a0e16);box-shadow:0 0 70px -34px var(--accent)}
.path .pl{font-family:var(--mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t-lo)}
.path.is-asgard .pl{color:var(--accent-hi)}
.path h4{font-size:1.45rem;font-stretch:112%;margin-top:12px;letter-spacing:-.025em}
.path ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.path li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;font-size:.93rem;color:var(--t);line-height:1.45}
.path li b{color:var(--t-hi);font-weight:600}
.path .pk{width:21px;height:21px;border:1px solid var(--ink-line-2);display:grid;place-items:center;font-size:.75rem;flex-shrink:0;margin-top:1px;color:var(--t-lo);font-family:var(--mono)}
.path.is-asgard .pk{border-color:color-mix(in oklab,var(--accent) 55%,var(--ink-line));color:var(--accent-hi)}
.path .pfoot{margin-top:auto;padding-top:26px;border-top:1px solid var(--ink-line);display:flex;align-items:baseline;gap:14px}
.path .pfoot b{font-weight:800;font-size:1.9rem;color:var(--t-hi);font-stretch:112%;letter-spacing:-.02em}
.path.is-asgard .pfoot b{color:var(--accent-hi)}
.path .pfoot span{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t-lo);line-height:1.5}

/* ============================================================
   APPLY / WHAT YOU BRING (reused naming from partner scope,
   redeclared for independence)
   ============================================================ */
.apply-need{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:54px auto 0;border:1px solid var(--ink-line);max-width:920px;text-align:left}
@media(max-width:680px){.apply-need{grid-template-columns:1fr}}
.apply-need .an{padding:26px 28px;border-right:1px solid var(--ink-line)}
.apply-need .an:last-child{border-right:none}
@media(max-width:680px){.apply-need .an{border-right:none;border-bottom:1px solid var(--ink-line)}.apply-need .an:last-child{border-bottom:none}}
.apply-need .an .ai{font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-hi)}
.apply-need .an b{display:block;margin-top:10px;font-size:1.02rem;color:var(--t-hi);font-stretch:108%}
.apply-need .an span{display:block;margin-top:6px;font-size:.84rem;color:var(--t-mid);line-height:1.5}
.apply-note{margin-top:34px;font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t-lo)}
.apply-note b{color:var(--accent-hi);font-weight:500}

/* ============================================================
   LAUNCHBELT ORCHESTRATION ENGINE — decomposition in action
   ============================================================ */
.orch{margin-top:58px}
.orch .window-body{gap:16px}

/* input: one model in */
.orch-in{
  border:1px solid color-mix(in oklab,var(--accent) 32%,var(--ink-line));
  background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 9%,#0a0e16),#0a0e16);
  padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.orch-in .oi-tag{font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-hi);display:block}
.orch-in b{display:block;margin-top:7px;font-size:1.05rem;color:var(--t-hi);font-stretch:108%}
.orch-in .oi-meta{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t-lo);display:block;margin-top:6px}
.orch-in .oi-stat{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-hi);border:1px solid color-mix(in oklab,var(--accent) 40%,transparent);padding:6px 11px;white-space:nowrap}

/* decompose connector with travelling pulse */
.orch-decompose{display:flex;align-items:center;gap:18px;padding:4px 0}
.orch-decompose .od-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--ink-line-2),transparent);position:relative;overflow:hidden}
.orch-decompose .od-line::after{content:"";position:absolute;top:0;left:-32%;width:32%;height:100%;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.orch.in .od-line::after{animation:odflow 2.6s linear infinite}
@keyframes odflow{to{left:132%}}
.orch-decompose .od-lab{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t-mid);white-space:nowrap;text-align:center}
.orch-decompose .od-lab b{color:var(--accent-hi);font-weight:500}

/* work-package grid */
.orch-wps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--ink-line);border:1px solid var(--ink-line)}
@media(max-width:900px){.orch-wps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.orch-wps{grid-template-columns:1fr}}
.wp{background:#0a0e16;padding:18px 16px;display:flex;flex-direction:column;transition:.35s var(--ease);position:relative}
.wp:hover{background:#0b1018}
.wp .wpid{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;color:var(--accent-hi)}
.wp .wpname{display:block;margin-top:8px;font-size:.98rem;color:var(--t-hi);font-weight:600;font-stretch:106%;line-height:1.15}
.wp .wpproc{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t-lo);margin-top:7px;display:block}
.wp .wpstat{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.wp .wpstat i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:blink 1.6s infinite}
.wp .wpstat.ok{color:var(--accent-hi)}
.wp .wpstat.gold{color:var(--gold-hi)}
.wp .wpstat.wait{color:var(--t-mid)}
.orch-prog{height:5px;background:var(--ink-line);margin-top:11px;overflow:hidden}
.orch-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-hi))}
.orch.in .orch-prog i{animation:orchgrow 1.5s var(--ease) forwards}
@keyframes orchgrow{to{width:var(--w)}}
.orch.in .wp:nth-child(2) .orch-prog i{animation-delay:.12s}
.orch.in .wp:nth-child(3) .orch-prog i{animation-delay:.24s}
.orch.in .wp:nth-child(4) .orch-prog i{animation-delay:.36s}
.orch.in .wp:nth-child(5) .orch-prog i{animation-delay:.48s}
.wp .wppct{font-family:var(--mono);font-size:.75rem;color:var(--t-mid);margin-top:8px;align-self:flex-end}

/* visibility footer */
.orch-foot{display:flex;align-items:center;gap:30px 34px;flex-wrap:wrap;border:1px solid var(--ink-line);background:#0a0e16;padding:18px 22px}
.orch-foot .of-m{display:flex;align-items:baseline;gap:9px}
.orch-foot .of-m b{font-weight:800;font-size:1.4rem;color:var(--t-hi);font-stretch:110%;letter-spacing:-.02em}
.orch-foot .of-m span{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t-lo)}
.orch-foot .of-note{margin-left:auto;font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-hi)}
@media(max-width:680px){.orch-foot .of-note{margin-left:0}}