/* /food-labels: How it works scene (a kraft bag label fills field by field beside a checklist). */
.hub-anim.ha-food-labels .ha-stage { min-height: 0; border: 1px solid #d9e3b5; background: radial-gradient(circle at 20% 20%, rgba(101, 163, 13, .08) 0 2px, transparent 3px) 0 0 / 22px 22px, linear-gradient(180deg, #fbfdf2, #eef5d8); }
.hub-anim.ha-food-labels .sc { display: flex; align-items: center; justify-content: center; gap: 2.4rem; min-height: 290px; }
.hub-anim.ha-food-labels .fd-bag { position: relative; width: 210px; height: 280px; flex: 0 0 auto; background: linear-gradient(90deg, #b88a55, #d2a874 30%, #c79a63 70%, #a97b47); border: 2.5px solid #3f2a14; border-radius: 6px 6px 12px 12px; box-sizing: border-box; box-shadow: 6px 7px 0 rgba(63, 42, 20, .55); }
.hub-anim.ha-food-labels .fd-fold { position: absolute; left: -2.5px; right: -2.5px; top: -2.5px; height: 34px; background: repeating-linear-gradient(90deg, #a97b47 0 6px, #b98b56 6px 12px); border: 2.5px solid #3f2a14; border-radius: 6px 6px 0 0; }
.hub-anim.ha-food-labels .fd-lab { position: absolute; left: 18px; right: 18px; top: 56px; height: 196px; padding: 14px 12px; background: #fffdf6; border: 2px solid #3f2a14; border-radius: 8px; box-sizing: border-box; text-align: left; }
.hub-anim.ha-food-labels .fd-l { display: block; } .hub-anim.ha-food-labels .fd-name { font: 800 1rem/1.15 Manrope, Inter, sans-serif; color: #1a2e05; margin-bottom: 8px; }
.hub-anim.ha-food-labels .fd-ing { font: 500 .66rem/1.45 Inter, system-ui, sans-serif; color: #3f3f46; margin-bottom: 8px; }
.hub-anim.ha-food-labels .fd-con { display: inline-block; padding: 3px 6px; background: #fef08a; border-radius: 4px; font: 800 .64rem/1.2 Inter, system-ui, sans-serif; color: #1a2e05; margin-bottom: 10px; }
.hub-anim.ha-food-labels .fd-net { display: flex; justify-content: space-between; padding-top: 7px; border-top: 1.5px dashed #a3a3a3; } .hub-anim.ha-food-labels .fd-net em { font: 800 .7rem/1 Manrope, Inter, sans-serif; font-style: normal; color: #1a2e05; }
.hub-anim.ha-food-labels .fd-check { display: block; width: 210px; margin: 0; padding: 0; list-style: none; flex: 0 0 auto; }
.hub-anim.ha-food-labels .fd-check li { position: relative; display: block; margin: 0 0 .6rem; padding: .62rem .8rem .62rem 2.4rem; background: #fff; border: 2px solid #365314; border-radius: 10px; font: 700 .84rem/1.2 Inter, system-ui, sans-serif; color: #1a2e05; box-shadow: 3px 3px 0 #365314; }
.hub-anim.ha-food-labels .fd-check li::before { content: ""; position: absolute; left: .7rem; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2px solid #365314; border-radius: 5px; box-sizing: border-box; background: #4d7c0f; }
.hub-anim.ha-food-labels .fd-check li::after { content: ""; position: absolute; left: 1.02rem; top: 50%; width: 4px; height: 8px; margin-top: -6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 640px) {
 .hub-anim.ha-food-labels .sc { flex-direction: column; gap: 1rem; } .hub-anim.ha-food-labels .ha-stage { padding-bottom: 3.4rem; }
 .hub-anim.ha-food-labels .fd-bag { width: 200px; height: 270px; } .hub-anim.ha-food-labels .fd-check { width: 100%; max-width: 230px; }
}
@media (prefers-reduced-motion: no-preference) {
 .hub-anim.ha-food-labels .fd-name { animation: fd-a 10s ease infinite both; } .hub-anim.ha-food-labels .fd-ing { animation: fd-b 10s ease infinite both; } .hub-anim.ha-food-labels .fd-con { animation: fd-c 10s ease infinite both; } .hub-anim.ha-food-labels .fd-net { animation: fd-d 10s ease infinite both; }
 .hub-anim.ha-food-labels .fd-c1::after { animation: fd-ka 10s ease infinite both; } .hub-anim.ha-food-labels .fd-c1::before { animation: fd-xa 10s ease infinite both; } .hub-anim.ha-food-labels .fd-c2::after { animation: fd-kb 10s ease infinite both; } .hub-anim.ha-food-labels .fd-c2::before { animation: fd-xb 10s ease infinite both; } .hub-anim.ha-food-labels .fd-c3::after { animation: fd-kc 10s ease infinite both; } .hub-anim.ha-food-labels .fd-c3::before { animation: fd-xc 10s ease infinite both; } .hub-anim.ha-food-labels .fd-c4::after { animation: fd-kd 10s ease infinite both; } .hub-anim.ha-food-labels .fd-c4::before { animation: fd-xd 10s ease infinite both; }
 @keyframes fd-xa { 0%, 10% { background: #fff; } 14%, 94% { background: #4d7c0f; } 100% { background: #fff; } }
 @keyframes fd-xb { 0%, 28% { background: #fff; } 32%, 94% { background: #4d7c0f; } 100% { background: #fff; } }
 @keyframes fd-xc { 0%, 48% { background: #fff; } 52%, 94% { background: #4d7c0f; } 100% { background: #fff; } }
 @keyframes fd-xd { 0%, 66% { background: #fff; } 70%, 94% { background: #4d7c0f; } 100% { background: #fff; } }
 @keyframes fd-ka { 0%, 10% { opacity: 0; } 14%, 94% { opacity: 1; } 100% { opacity: 0; } }
 @keyframes fd-kb { 0%, 28% { opacity: 0; } 32%, 94% { opacity: 1; } 100% { opacity: 0; } }
 @keyframes fd-kc { 0%, 48% { opacity: 0; } 52%, 94% { opacity: 1; } 100% { opacity: 0; } }
 @keyframes fd-kd { 0%, 66% { opacity: 0; } 70%, 94% { opacity: 1; } 100% { opacity: 0; } }
 @keyframes fd-a { 0%, 6% { opacity: 0; transform: translateY(6px); } 12%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
 @keyframes fd-b { 0%, 22% { opacity: 0; transform: translateY(6px); } 30%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
 @keyframes fd-c { 0%, 42% { opacity: 0; transform: scale(.8); } 48% { opacity: 1; transform: scale(1.12); } 52%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
 @keyframes fd-d { 0%, 60% { opacity: 0; transform: translateY(6px); } 68%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
}