.c-page-hero{
  position:relative;
  padding:var(--space-9) 0 var(--space-8);
  background:
    radial-gradient(circle at 50% 20%,rgba(45,79,119,.34),transparent 35%),
    radial-gradient(circle at 69% 43%,rgba(124,77,0,.18),transparent 26%),
    linear-gradient(180deg,#030712 0%,#02050b 88%);
  color:var(--text)
}
.c-page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(rgba(91,110,145,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(91,110,145,.055) 1px,transparent 1px);
  background-size:4rem 4rem;
  mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 84%,transparent)
}
.c-hero-copy{position:relative;z-index:1;max-width:58rem}
.c-hero-copy.is-centered{margin-inline:auto;text-align:center}
.c-hero-copy.is-centered .c-kicker{margin-inline:auto}
.c-hero-copy>p{max-width:49rem;margin-top:var(--space-5);color:#aeb9c8;font-size:var(--fs-3)}
.c-hero-copy.is-centered>p{margin-inline:auto}
.c-hero-copy .c-actions{margin-top:var(--space-6)}
.c-hero-copy.is-centered .c-actions{justify-content:center}
.c-section{padding:var(--space-10) 0;background:var(--bg);color:var(--text)}
.c-section-alt{background:#060a13}
.c-section-compact{padding:var(--space-8) 0}
.c-section+.c-section{border-top:1px solid rgba(151,166,191,.1)}
.c-final{padding:var(--space-9) 0;background:radial-gradient(circle at 50% 50%,rgba(161,58,0,.2),transparent 35%),#050913}
[data-hero-form="gradient-motion"]{animation:hero-shift 13s ease-in-out infinite alternate;background-size:110% 110%}
@keyframes hero-shift{from{background-position:47% 18%,69% 43%,0 0}to{background-position:54% 25%,63% 37%,0 0}}
[data-hero-face="confirmed-draft"]:has(.hero-art){border-radius:0;background:transparent;overflow:visible}
@media(max-width:42rem){
  [data-hero-form] .hero-stage,[data-hero-form] .hero-art{width:min(calc(100% - var(--gutter)*2),100%);margin-inline:auto;height:auto;min-height:0;overflow:visible;transform:none}
  .hero-art{grid-template-columns:minmax(0,1fr);grid-template-areas:none;gap:var(--space-3)}
  .hero-art>*{grid-area:auto;grid-column:1;width:auto;max-width:none;justify-self:stretch}
  .hero-art .art-backdrop{inset:0}
  .c-page-hero{padding-block:var(--space-8)}
  .c-section{padding-block:var(--space-8)}
}

[data-hero-face="confirmed-draft"]:not([data-face-root]):not(:has(> .hero-queue)):not(:has(> .hero-art)):not([class*="hero-art"]){height:auto;min-height:0;min-width:0}
[data-hero-face="confirmed-draft"]:not([data-face-root]):has(.hero-art){min-height:510px;overflow:visible;background:transparent;border-radius:0;--mono:var(--mv-font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);--green:#27785d}
[data-hero-face="confirmed-draft"]:not([data-face-root])::before,[data-hero-face="confirmed-draft"]:not([data-face-root])::after{display:none;content:none}
[data-hero-face="confirmed-draft"]:not([data-face-root])>img{display:none}
[data-hero-face="confirmed-draft"] .hero-art{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  width:min(1120px,calc(100% - 80px));
  margin:0 auto;
  padding:18px;
  border:1px solid #28354b;
  border-radius:3px;
  background:rgba(6,11,21,.88);
  box-shadow:0 36px 100px rgba(0,0,0,.38);
}
[data-hero-face="confirmed-draft"] .hero-art>svg{
  grid-column:1/-1;
  width:100%;
  height:86px;
  border:1px solid #202c40;
  background:#09101d;
}
[data-hero-face="confirmed-draft"] .hero-art .queue-card{
  min-width:0;
  border:1px solid #2a354a;
  border-radius:2px;
  background:#101827;
  overflow:hidden;
}
[data-hero-face="confirmed-draft"] .hero-art .float-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:42px;
  padding:0 13px;
  border-bottom:1px solid #283348;
  color:#dce3ec;
  font:600 11px/1.2 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
}
[data-hero-face="confirmed-draft"] .hero-art .status-live{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#d17b43;
  font:500 10px/1 "SFMono-Regular",Consolas,monospace;
}
[data-hero-face="confirmed-draft"] .hero-art .status-live:before{
  content:"";
  width:6px;
  height:6px;
  background:#c45613;
  box-shadow:0 0 9px rgba(196,86,19,.75);
}
[data-hero-face="confirmed-draft"] .hero-art .build-row{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);
  gap:12px;
  min-height:43px;
  padding:10px 13px;
  border-bottom:1px solid #202a3d;
}
[data-hero-face="confirmed-draft"] .hero-art .build-row:last-child{border-bottom:0}
[data-hero-face="confirmed-draft"] .hero-art .runner-line{
  min-width:0;
  color:#d9e0e9;
  font:500 11px/1.35 "SFMono-Regular",Consolas,monospace;
}
[data-hero-face="confirmed-draft"] .hero-art .runner-line small{
  display:block;
  margin-top:4px;
  color:#718096;
  font-size:9px;
}
[data-hero-face="confirmed-draft"] .hero-art .pill-ok{
  align-self:center;
  justify-self:end;
  padding:5px 7px;
  border:1px solid #78401f;
  background:#24140e;
  color:#edb489;
  font:500 9px/1 "SFMono-Regular",Consolas,monospace;
  white-space:nowrap;
}
[data-hero-face="confirmed-draft"] .hero-art .node-label{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:46px;
  padding:0 14px;
  border:1px solid #273349;
  background:#0a111e;
  color:#8290a5;
  font:500 10px/1.4 "SFMono-Regular",Consolas,monospace;
}
[data-hero-face="confirmed-draft"] .hero-art .node-label strong{color:#d7dee8;font-weight:500}
@media(max-width:42rem){
  [data-hero-face="confirmed-draft"]:not([data-face-root]):not(:has(> .hero-queue)):not(:has(> .hero-art)):not([class*="hero-art"]){min-height:0}
  [data-hero-face="confirmed-draft"] .hero-art{height:auto;min-height:0;width:auto;max-width:100%;transform:none;grid-template-columns:minmax(0,1fr);grid-template-areas:none;overflow:visible}
  [data-hero-face="confirmed-draft"] .hero-art>*:not(.art-backdrop){grid-area:auto;grid-column:1;justify-self:stretch;transform:none}
  [data-hero-face="confirmed-draft"] .cluster{position:relative;inset:auto;width:100%;height:auto}
  [data-hero-face="confirmed-draft"] .float-card,
  [data-hero-face="confirmed-draft"] .node-label{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:auto;max-width:none;display:inline-block;margin:.35rem .35rem 0 0}
  [data-hero-face="confirmed-draft"] .queue-card,
  [data-hero-face="confirmed-draft"] .runner-card{position:relative;inset:auto;width:100%;height:auto;min-height:0;transform:none}
}
