Place inside a position:relative Hero section. */
.smart-hero-feature{position:absolute;z-index:6;right:max(24px,calc((100vw - 1180px)/2));bottom:28px;width:min(390px,38vw);padding:20px;border-radius:16px;box-shadow:0 18px 45px rgba(0,0,0,.24);backdrop-filter:blur(15px)}
.smart-hero-feature.hf-public-pos-left{right:auto;left:max(24px,calc((100vw - 1180px)/2))}
.smart-hero-feature.hf-public-tone-dark{background:rgba(8,20,31,var(--hf-public-opacity,.94));color:#fff}
.smart-hero-feature.hf-public-tone-light{background:rgba(255,255,255,var(--hf-public-opacity,.94));color:#14212c}
.smart-hero-feature.hf-public-tone-brand{background:color-mix(in srgb,var(--brand-primary,#11283a) calc(var(--hf-public-opacity,.94)*100%),transparent);color:#fff}
.smart-hero-feature-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.smart-hero-feature-top .mini-label{display:block;font-size:.67rem;letter-spacing:.09em;text-transform:uppercase;opacity:.68}
.smart-hero-feature-top strong{display:block;margin-top:4px;font-size:1.02rem}
.smart-hero-feature-status{padding:5px 8px;border-radius:999px;font-size:.66rem;font-weight:900}
.smart-hero-feature-status.is-available{background:#d9f5e6;color:#0c6b3e}
.smart-hero-feature-status.is-attention{background:#ffe7bf;color:#835000}
.smart-hero-feature-status.is-neutral{background:#e5ebef;color:#526673}
.smart-hero-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:17px}
.smart-hero-feature-grid>div{padding:11px;border:1px solid rgba(127,147,162,.22);border-radius:10px}
.smart-hero-feature-grid b{display:block;font-size:1.25rem;line-height:1}
.smart-hero-feature-grid span{display:block;margin-top:4px;font-size:.72rem;opacity:.72}

@media(max-width:900px){
  .hero-composition-grid{grid-template-columns:1fr}
  .hero-composition-demo{position:static}
}
@media(max-width:720px){
  .hero-demo-stage{min-height:460px}
  .hero-demo-copy{left:20px;right:20px;max-width:none;top:34%;transform:none;text-align:center}
  .hero-demo-actions{justify-content:center}
  .hero-demo-feature{left:18px!important;right:18px!important;bottom:18px;width:auto}
  .smart-hero-feature{position:relative;left:auto!important;right:auto!important;bottom:auto;width:auto;margin:20px}
}