.c-page-hero{padding-block:var(--hero-pad)}
[data-hero-form="product-visual"]{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(31rem,1fr);
  gap:var(--space-3);
  align-items:start
}
.hero-copy{
  display:flex;
  min-height:42.5rem;
  flex-direction:column;
  justify-content:center;
  padding:clamp(2rem,4vw,4rem);
  border-radius:var(--radius-lg);
  background:#F3EEDD;
  color:#25251F
}
.hero-copy h1{max-width:40rem;margin:var(--space-3) 0}
.hero-copy>p{max-width:37rem;color:#4F504A;font-size:var(--text-md)}
.hero-note{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-3);color:#55564F;font-family:var(--font-mono);font-size:var(--text-xs)}
.hero-note strong{color:#873515;font-size:var(--text-lg)}
.hero-stage{
  min-width:0;
  min-height:42.5rem;
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  background:#DDE9F2;
  color:#1D2D38;
  overflow:hidden
}
.hero-stage-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-3);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em}
.hero-art{
  position:relative;
  display:grid;
  width:100%;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  grid-template-areas:"queue node" "queue runner" "status status";
  gap:var(--space-2);
  align-items:stretch
}
.hero-art>*{min-width:0}
.hero-art .queue-card{
  grid-area:queue;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  padding:1.125rem;
  border-radius:var(--radius-md);
  background:#FFFFFF;
  color:#202426;
  box-shadow:var(--shadow)
}
.float-title{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:var(--text-sm);font-weight:750}
.float-title span{color:#747978;font-family:var(--font-mono);font-size:var(--text-xs)}
.build-row{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;gap:.65rem;padding:.75rem;border-radius:var(--radius-sm);background:#F4F5F2;color:#202426}
.build-row>b{display:grid;width:2rem;height:2rem;place-items:center;border-radius:.55rem;background:#E3E2F2;color:#29263B;font-family:var(--font-mono);font-size:var(--text-xs)}
.build-row div{min-width:0;font-size:var(--text-xs);font-weight:700}
.build-row small{display:block;color:#606663;font-family:var(--font-mono);font-size:.64rem;overflow-wrap:anywhere}
.pill-ok{padding:.35rem .45rem;border-radius:999px;background:#DDEBE8;color:#17312E;font-family:var(--font-mono);font-size:.62rem;font-weight:750}
.node-label{grid-area:node;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;padding:1rem;border-radius:var(--radius-md);background:#873515;color:#FFFFFF}
.node-label strong{font-size:var(--text-base)}
.node-label small{color:#F5D9CA;font-family:var(--font-mono);font-size:.65rem}
.status-live{display:inline-flex;width:fit-content;align-items:center;gap:.4rem;padding:.35rem .45rem;border-radius:999px;background:#FFFFFF;color:#873515;font-family:var(--font-mono);font-size:.6rem;font-weight:800}
.status-live::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:#C76D2A}
.runner-card{grid-area:runner;display:flex;flex-direction:column;gap:.6rem;padding:1rem;border-radius:var(--radius-md);background:#F1E2E5;color:#38242A}
.runner-card strong{font-size:var(--text-sm)}
.runner-line{display:flex;justify-content:space-between;gap:.5rem;font-family:var(--font-mono);font-size:.65rem}
.cluster{display:flex;gap:.3rem}
.cluster span{flex:1;height:.3rem;border-radius:999px;background:#FFFFFF}
.cluster span:first-child{background:#C76D2A}
.delivery-strip{grid-area:status;width:100%;min-height:7.25rem;border-radius:var(--radius-md);background:#202426}
.page-section{padding-block:var(--section-pad)}
.page-section-tight{padding-block:clamp(3.5rem,7vw,6rem)}
.surface-light{background:#FCFBF8;color:#202426}
.surface-dark{background:#202426;color:#FFFFFF}
.surface-dark .u-muted{color:#BFC5C2}
@media (max-width:64rem){
  [data-hero-form="product-visual"]{grid-template-columns:1fr}
  .hero-copy,.hero-stage{min-height:0}
}
@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}
  [data-hero-form] .hero-stage{width:100%;padding:var(--space-3)}
  .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}
  .hero-copy{padding:var(--space-4) var(--space-3)}
  .hero-stage-head{align-items:flex-start;flex-direction:column}
}

[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{
  display:grid;
  width:100%;
  position:relative;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  grid-template-areas:
    "queue node"
    "queue runner"
    "status status";
  gap:14px;
  align-items:stretch;
}
[data-hero-face="confirmed-draft"] .hero-art svg{
  grid-area:status;
  width:100%;
  height:auto;
  border-radius:18px;
  background:#202426;
}
[data-hero-face="confirmed-draft"] .hero-art .queue-card{
  grid-area:queue;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  border-radius:24px;
  background:#ffffff;
  color:#202426;
  box-shadow:0 14px 34px rgba(29,45,56,.10);
}
[data-hero-face="confirmed-draft"] .hero-art .float-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:13px;
  font-weight:750;
}
[data-hero-face="confirmed-draft"] .hero-art .float-title span{
  color:#515958;
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:10px;
  font-weight:600;
}
[data-hero-face="confirmed-draft"] .hero-art .build-row{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:14px;
  background:#f4f5f2;
}
[data-hero-face="confirmed-draft"] .hero-art .build-row b{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:9px;
  background:#e3e2f2;
  color:#29263b;
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:11px;
}
[data-hero-face="confirmed-draft"] .hero-art .build-row div{
  min-width:0;
  font-size:12px;
  font-weight:700;
}
[data-hero-face="confirmed-draft"] .hero-art .build-row small{
  display:block;
  margin-top:2px;
  color:#555B59;
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:9px;
}
[data-hero-face="confirmed-draft"] .hero-art .pill-ok{
  padding:5px 7px;
  border-radius:999px;
  background:#ddebe8;
  color:#17312e;
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:9px;
  font-weight:750;
}
[data-hero-face="confirmed-draft"] .hero-art .node-label{
  grid-area:node;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
  padding:17px;
  border-radius:20px;
  background:#873515;
  color:#ffffff;
}
[data-hero-face="confirmed-draft"] .hero-art .node-label strong{
  font-size:15px;
}
[data-hero-face="confirmed-draft"] .hero-art .node-label small{
  color:#f5d9ca;
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:9px;
  line-height:1.5;
}
[data-hero-face="confirmed-draft"] .hero-art .status-live{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  gap:6px;
  padding:5px 7px;
  border-radius:999px;
  background:#ffffff;
  color:#873515;
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:9px;
  font-weight:800;
}
[data-hero-face="confirmed-draft"] .hero-art .status-live:before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#c76d2a;
}
[data-hero-face="confirmed-draft"] .hero-art .runner-card{
  grid-area:runner;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:17px;
  border-radius:20px;
  background:#f1e2e5;
  color:#38242a;
}
[data-hero-face="confirmed-draft"] .hero-art .runner-card strong{
  font-size:13px;
}
[data-hero-face="confirmed-draft"] .hero-art .runner-line{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:9px;
}
[data-hero-face="confirmed-draft"] .hero-art .runner-line span:last-child{
  font-weight:800;
}
[data-hero-face="confirmed-draft"] .hero-art .cluster{
  display:flex;
  gap:5px;
  margin-top:3px;
}
[data-hero-face="confirmed-draft"] .hero-art .cluster span{
  flex:1;
  height:5px;
  border-radius:999px;
  background:#ffffff;
}
[data-hero-face="confirmed-draft"] .hero-art .cluster span:first-child{
  background:#c76d2a;
}
@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}
}