.st-hero{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media (min-width:62rem){.st-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.st-sum{
  margin:1.1rem 0 0;max-width:34ch;
  font-size:clamp(1.1rem,2.2vw,1.35rem);line-height:1.35;
  font-variation-settings:"wdth" 100,"wght" 500;color:var(--steel);
}
.st-sum strong{color:var(--iron);font-variation-settings:"wdth" 118,"wght" 800;font-weight:normal;font-size:1.25em}

.st-diagram{margin:0;max-width:560px;width:100%;justify-self:center}
.st-diagram svg{display:block;width:100%;height:auto;overflow:visible}

.slab .f-top{fill:color-mix(in srgb,var(--plate-face) 42%,transparent);stroke:var(--line-strong);stroke-width:1.2}
.slab .f-l{fill:color-mix(in srgb,var(--plate-face-2) 80%,transparent);stroke:var(--line-strong);stroke-width:1}
.slab .f-r{fill:color-mix(in srgb,var(--plate-edge) 55%,transparent);stroke:var(--line-strong);stroke-width:1}
.slab .slab-mark{fill:var(--steel);opacity:.85}
.slab .lead{stroke:var(--line-strong);stroke-width:1.2;stroke-dasharray:2 3;fill:none}
.slab .slab-t{
  fill:var(--iron);font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:15px;
  font-variation-settings:"wdth" 108,"wght" 650;
}
.slab-ai .f-top{fill:color-mix(in srgb,var(--hazard) 30%,transparent);stroke:var(--hazard)}
.slab-ai .f-l{fill:color-mix(in srgb,var(--hazard) 55%,var(--plate-face-2))}
.slab-ai .f-r{fill:color-mix(in srgb,var(--hazard) 70%,var(--plate-edge))}
.slab-ai .slab-mark{fill:var(--hazard);opacity:1}
.slab-ai .slab-t{fill:var(--rust)}

.slab{cursor:pointer;outline:none}
.slab .f-top,.slab .f-l,.slab .f-r,.slab .slab-mark{transition:fill .2s ease,opacity .2s ease}
.slab:hover .f-top,.slab:focus-visible .f-top{fill:color-mix(in srgb,var(--hazard) 22%,transparent);stroke:var(--hazard)}
.slab:hover .slab-mark,.slab:focus-visible .slab-mark{fill:var(--hazard);opacity:1}
.slab:hover .slab-t,.slab:focus-visible .slab-t{fill:var(--hazard);text-decoration:underline}
.slab:focus-visible .f-top{stroke-width:3}

@media (prefers-reduced-motion:no-preference){
  .slab{animation:slab-open .9s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(var(--d) + 150ms)}
  .slab-ai .f-top{animation:ai-breathe 3.2s ease-in-out 1.4s infinite}
}
@keyframes slab-open{
  from{transform:translateY(var(--s));opacity:.0}
  35%{opacity:1}
  to{transform:translateY(0);opacity:1}
}
@keyframes ai-breathe{
  0%,100%{fill:color-mix(in srgb,var(--hazard) 26%,transparent)}
  50%{fill:color-mix(in srgb,var(--hazard) 44%,transparent)}
}

@media (max-width:40rem){
  .slab .slab-t{font-size:21px}
  .st-diagram svg{margin-left:-6%;width:112%}
}

.sg{scroll-margin-top:5rem}
.sg-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.4rem .85rem}
.sg-head h2{margin:0}
.sg-i{
  width:2.6rem;height:2.6rem;padding:.42rem;flex:none;fill:currentColor;
  color:var(--hazard);background:var(--paper);border:1px solid var(--line-strong);border-radius:.6rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 var(--plate-edge);
}
.sg-n{font-size:.875rem;color:var(--steel);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:34rem){
  .sg-head{grid-template-columns:auto minmax(0,1fr)}
  .sg-n{grid-column:2;text-align:left}
}

.techgrid{grid-template-columns:repeat(auto-fill,minmax(8.6rem,1fr));gap:.85rem;margin-top:1.5rem}
.st{position:relative;display:flex;flex-direction:column}
.st .tile{
  flex:1;position:relative;border-radius:.7rem;
  border:1px solid var(--line-strong);border-bottom-width:3px;border-bottom-color:var(--plate-edge);
  background:linear-gradient(180deg,var(--chip-bg-hover),var(--chip-bg));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 2px rgba(0,0,0,.12);
  color:var(--steel);
  transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease;
}
.st .tile-i{transition:color .2s ease,filter .2s ease}
.st .tile:hover,.st .tile:focus-visible{
  transform:translateY(-3px);
  color:var(--iron);
  border-color:color-mix(in srgb,var(--brand) 70%,var(--line-strong));
  border-bottom-color:var(--brand);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
             0 12px 28px -10px color-mix(in srgb,var(--brand) 60%,transparent),
             0 0 0 1px color-mix(in srgb,var(--brand) 25%,transparent);
}
.st .tile:hover .tile-i,.st .tile:focus-visible .tile-i{
  color:var(--brand);
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--brand) 55%,transparent));
}
.st .tile:active{transform:translateY(0);border-bottom-width:1px;margin-top:2px}
.st .tile:focus-visible{outline:3px solid var(--hazard);outline-offset:3px}
.st .tile-i-none{border-radius:.35rem}
.st .tile-i-3{font-size:.66rem;letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){
  .st .tile,.st .tile-i{transition:none}
  .st .tile:hover,.st .tile:focus-visible{transform:none}
}

.proof{
  position:absolute;top:-.55rem;right:.45rem;z-index:1;
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.12rem .45rem;border-radius:999px;
  font-size:.6875rem;line-height:1.4;white-space:nowrap;text-decoration:none;
  font-variation-settings:"wdth" 100,"wght" 600;
}
.proof-live{background:var(--iron);color:var(--on-iron);border:1px solid var(--badge-edge)}
.proof-live .proof-dot{width:.42rem;height:.42rem;border-radius:50%;background:#2FD16B;box-shadow:0 0 0 0 rgba(47,209,107,.5)}
.proof-shipping{background:var(--ground);color:var(--rust);border:1px dashed var(--hazard)}
.proof-shipping .proof-dot{width:.42rem;height:.42rem;border-radius:50%;border:1.5px solid var(--hazard)}
.proof:hover{background:var(--hazard);color:var(--on-iron);border-color:var(--hazard)}
.proof:focus-visible{outline:3px solid var(--hazard);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .proof-live .proof-dot{animation:proof-pulse 2.4s ease-out infinite}
}
@keyframes proof-pulse{
  0%{box-shadow:0 0 0 0 rgba(47,209,107,.5)}
  70%{box-shadow:0 0 0 .45rem rgba(47,209,107,0)}
  100%{box-shadow:0 0 0 0 rgba(47,209,107,0)}
}

@supports (animation-timeline: view()) {
  .techgrid .st{animation:st-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .techgrid .st:nth-child(3n+2){animation-range:entry 8% entry 78%}
  .techgrid .st:nth-child(3n){animation-range:entry 16% entry 86%}
}
@keyframes st-rise{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
.st .tile:hover .tile-i,.st .tile:focus-visible .tile-i{animation:st-bounce .55s cubic-bezier(.3,1.6,.5,1) 1}
@keyframes st-bounce{0%{transform:none}35%{transform:translateY(-5px) rotate(-6deg) scale(1.12)}70%{transform:translateY(1px) rotate(3deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){
  .techgrid .st{animation:none}
  .st .tile:hover .tile-i,.st .tile:focus-visible .tile-i{animation:none}
}
.proof-learn{background:var(--ground);color:var(--steel);border:1px dashed var(--line-strong)}