/* A compact product-flow ribbon below the existing hero demo. */
.hero-flow{width:min(1010px,calc(100% - 48px));margin:34px auto 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;list-style:none;text-align:left}
.hero-flow>li{position:relative;min-width:0;min-height:91px;padding:21px 16px 17px;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:12px;border:1px solid #30363e;border-radius:13px;background:#181d23}
.hero-flow>li:not(:last-child)::after{content:'→';position:absolute;right:-19px;top:50%;transform:translateY(-50%);color:#63707b;font-size:17px;font-weight:400;line-height:1}
.hero-flow-number{position:absolute;right:12px;top:8px;color:#58636e;font-size:8px;font-weight:650;letter-spacing:.08em}
.hero-flow-icon{display:grid;place-items:center;width:32px;height:34px;border-radius:9px;background:#232a32;color:#b2bcc4}
.hero-flow-icon svg{display:block;width:21px;height:21px}
.hero-flow-copy{min-width:0}.hero-flow-copy strong{display:block;color:#e2e8df;font-size:13px;font-weight:650;letter-spacing:-.025em;line-height:1.55}
.hero-flow-copy>span{display:block;margin-top:4px;color:#88939d;font-size:11px;font-weight:400;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.hero-flow .hero-flow-ai{border-color:#46533b;background:#1b221d}.hero-flow-ai .hero-flow-icon{color:#d6ff51;background:#2b3524}.hero-flow-ai .hero-flow-number{color:#788859}
.hero-flow-result .hero-flow-icon{color:#c4d8a4;background:#273020}
@media(max-width:1024px){.hero-flow{gap:18px;width:calc(100% - 48px)}.hero-flow>li{padding-inline:12px;gap:9px}.hero-flow>li:not(:last-child)::after{right:-16px;font-size:15px}.hero-flow-copy strong{font-size:12px}.hero-flow-copy>span{font-size:11px}}
@media(max-width:767px){.hero-flow{width:min(560px,calc(100% - 32px));grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin-top:28px}.hero-flow>li{min-height:94px;padding:20px 13px 15px;gap:10px;grid-template-columns:28px minmax(0,1fr)}.hero-flow-icon{width:28px;height:32px}.hero-flow-icon svg{width:19px;height:19px}.hero-flow>li:nth-child(2)::after{content:none}.hero-flow>li:not(:last-child)::after{right:-17px}.hero-flow-copy strong{font-size:12px}.hero-flow-copy>span{font-size:11px;margin-top:3px}.hero-flow-number{right:9px;top:7px}}