/* /print-labels-from-word: a typed list on a plain document page, a label sheet slides out
   from behind it and each person fills the next cell in order. Periwinkle desk, coral accents.
   Static (reduced-motion) state: sheet out, all nine cells filled, every line ticked, stamp on. */
.hub-anim.ha-print-labels-from-word .ha-stage { background-color: #e7ebfa; background-image: radial-gradient(rgba(49, 46, 129, 0.10) 1.2px, transparent 1.3px); background-size: 18px 18px; border: 1px solid #d6dcf3; }
.hub-anim.ha-print-labels-from-word .hw-scene { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.2rem; align-items: center; max-width: 860px; margin: 0 auto; }
.hub-anim.ha-print-labels-from-word .hw-doc { position: relative; z-index: 2; background: #fff; border-radius: 6px; padding: 1.4rem 1.3rem 1.5rem 2.2rem; transform: rotate(-2deg);
    box-shadow: 0 1px 0 #d6dcf3, 0 18px 34px -18px rgba(30, 27, 75, 0.45); background-image: linear-gradient(90deg, transparent 1.45rem, #fca5a5 1.45rem, #fca5a5 calc(1.45rem + 1px), transparent calc(1.45rem + 1px)); }
.hub-anim.ha-print-labels-from-word .hw-doc::after { content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px; background: linear-gradient(225deg, #e7ebfa 50%, #dfe3f5 50%); border-bottom-left-radius: 4px; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-word .hw-doc-title { margin: 0 0 0.8rem; font: 700 1.05rem/1.2 Georgia, "Times New Roman", serif; color: #1e1b4b; text-align: left; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-word .hw-doc ol { list-style: none; margin: 0; padding: 0; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-word .hw-doc li { position: relative; margin: 0; padding: 0.28rem 0 0.28rem 1.05rem; font: 400 0.8rem/1.35 Georgia, "Times New Roman", serif; color: #312e81; border-bottom: 1px solid #eef0fa; text-align: left; }
.hub-anim.ha-print-labels-from-word .hw-doc li::before { content: ""; position: absolute; left: 0; top: 0.62rem; width: 7px; height: 7px; border-radius: 999px; background: #f2705e; box-shadow: 0 0 0 2px #fde2dd; }
.hub-anim.ha-print-labels-from-word .hw-sheet { position: relative; z-index: 1; background: #fff; border-radius: 8px; padding: 1.5rem 0.9rem 1rem; transform: rotate(1.2deg); box-shadow: 0 1px 0 #d6dcf3, 0 22px 40px -20px rgba(30, 27, 75, 0.5); }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-word .hw-sheet-tab { position: absolute; top: -0.75rem; left: 1rem; margin: 0; padding: 0.32rem 0.7rem; border-radius: 999px; background: #1e1b4b; color: #fff; font: 800 0.66rem/1 Manrope, Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-word .hw-sheet ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem 0.5rem; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-word .hw-sheet li { margin: 0; min-width: 0; padding: 0.55rem 0.55rem; min-height: 4.1rem; box-sizing: border-box; border-radius: 9px; border: 1.5px solid #312e81; background: #fff7f5;
    display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; text-align: left; font: 500 0.7rem/1.25 Inter, system-ui, sans-serif; color: #3f3f46; }
.hub-anim.ha-print-labels-from-word .hw-sheet li b { font: 800 0.76rem/1.2 Manrope, Inter, sans-serif; color: #1e1b4b; }
.hub-anim.ha-print-labels-from-word .hw-sheet li span { display: block; white-space: nowrap; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-word .hw-stamp { position: absolute; left: 34%; bottom: -2.35rem; z-index: 3; margin: 0; padding: 0.5rem 0.85rem; background: #f2705e; color: #fff; border: 2px solid #1e1b4b; border-radius: 10px;
    box-shadow: 3px 4px 0 #1e1b4b; transform: rotate(-4deg); font: 800 0.82rem/1 Manrope, Inter, sans-serif; white-space: nowrap; text-align: left; }
.hub-anim.ha-print-labels-from-word .hw-stamp s { text-decoration-thickness: 2px; color: #ffe4de; margin-right: 0.3rem; font-weight: 700; }
@media (max-width: 1000px) {
    .hub-anim.ha-print-labels-from-word .hw-sheet li span { white-space: normal; }
}
@media (max-width: 760px) {
    .hub-anim.ha-print-labels-from-word .hw-scene { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
    .hub-anim.ha-print-labels-from-word .hw-doc { padding: 1.1rem 0.9rem 1.1rem 1.9rem; background-image: linear-gradient(90deg, transparent 1.2rem, #fca5a5 1.2rem, #fca5a5 calc(1.2rem + 1px), transparent calc(1.2rem + 1px)); }
    body.article-page article.blog-content .hub-anim.ha-print-labels-from-word .hw-doc li { font-size: 0.7rem; padding-top: 0.24rem; padding-bottom: 0.24rem; }
    body.article-page article.blog-content .hub-anim.ha-print-labels-from-word .hw-doc-title { font-size: 0.95rem; margin-bottom: 0.5rem; }
    .hub-anim.ha-print-labels-from-word .hw-sheet { padding: 1.3rem 0.7rem 0.8rem; }
    body.article-page article.blog-content .hub-anim.ha-print-labels-from-word .hw-doc li:nth-child(n+7), body.article-page article.blog-content .hub-anim.ha-print-labels-from-word .hw-sheet li:nth-child(n+7) { display: none; }
    body.article-page article.blog-content .hub-anim.ha-print-labels-from-word .hw-sheet ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.article-page article.blog-content .hub-anim.ha-print-labels-from-word .hw-sheet li { font-size: 0.62rem; min-height: 0; padding: 0.45rem 0.45rem; }
    .hub-anim.ha-print-labels-from-word .hw-sheet li b { font-size: 0.68rem; }
    body.article-page article.blog-content .hub-anim.ha-print-labels-from-word .hw-stamp { position: relative; left: auto; bottom: auto; justify-self: center; margin-top: -0.4rem; }
    body.article-page article.blog-content .hub-anim.ha-print-labels-from-word .hw-stamp { white-space: normal; max-width: calc(100% - 1rem); text-align: center; box-sizing: border-box; }
}
@media (prefers-reduced-motion: no-preference) {
    .hub-anim.ha-print-labels-from-word .hw-sheet, .hub-anim.ha-print-labels-from-word .hw-stamp, .hub-anim.ha-print-labels-from-word .hw-sheet li, .hub-anim.ha-print-labels-from-word .hw-sheet li > *, .hub-anim.ha-print-labels-from-word .hw-doc li, .hub-anim.ha-print-labels-from-word .hw-doc li::before { animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: ease-out; animation-fill-mode: both; }
    .hub-anim.ha-print-labels-from-word .hw-sheet { animation-name: hawSheet; }
    @keyframes hawSheet { 0%, 7% { opacity: 0; transform: translateX(-55%) rotate(-6deg) scale(0.92); } 16%, 92% { opacity: 1; transform: rotate(1.2deg); } 98%, 100% { opacity: 0; transform: translateX(8%) rotate(3deg); } }
    @media (max-width: 760px) {
        @keyframes hawSheet { 0%, 7% { opacity: 0; transform: translateY(-45%) rotate(-4deg) scale(0.92); } 16%, 92% { opacity: 1; transform: rotate(1.2deg); } 98%, 100% { opacity: 0; transform: translateY(6%) rotate(3deg); } }
    }
    .hub-anim.ha-print-labels-from-word .hw-stamp { animation-name: hawStamp; animation-timing-function: cubic-bezier(.2, 1.6, .4, 1); }
    @keyframes hawStamp { 0%, 66% { opacity: 0; transform: rotate(-14deg) scale(1.6); } 71%, 92% { opacity: 1; transform: rotate(-4deg) scale(1); } 97%, 100% { opacity: 0; transform: rotate(-4deg) scale(1); } }
    .hub-anim.ha-print-labels-from-word .hw-c1 { animation-name: hawC1; } .hub-anim.ha-print-labels-from-word .hw-c1 > * { animation-name: hawT1; } .hub-anim.ha-print-labels-from-word .hw-l1 { animation-name: hawL1; } .hub-anim.ha-print-labels-from-word .hw-l1::before { animation-name: hawD1; }
    @keyframes hawC1 { 0%, 19% { background: #fff; border-color: #c7cbe6; border-style: dashed; } 21.5% { background: #ffd9d1; border-color: #312e81; border-style: solid; } 26.5%, 92% { background: #fff7f5; border-color: #312e81; border-style: solid; } 98%, 100% { background: #fff; border-color: #c7cbe6; border-style: dashed; } }
    @keyframes hawT1 { 0%, 19% { opacity: 0; transform: translateY(4px); } 21.5%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
    @keyframes hawL1 { 0%, 18% { color: #312e81; background: transparent; } 19%, 22.5% { color: #1e1b4b; background: #fde2dd; } 25.5%, 92% { color: #a5a8c8; background: transparent; } 97%, 100% { color: #312e81; } }
    @keyframes hawD1 { 0%, 19% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } 21.5%, 92% { background: #f2705e; box-shadow: 0 0 0 2px #fde2dd; } 97%, 100% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } }
    .hub-anim.ha-print-labels-from-word .hw-c2 { animation-name: hawC2; } .hub-anim.ha-print-labels-from-word .hw-c2 > * { animation-name: hawT2; } .hub-anim.ha-print-labels-from-word .hw-l2 { animation-name: hawL2; } .hub-anim.ha-print-labels-from-word .hw-l2::before { animation-name: hawD2; }
    @keyframes hawC2 { 0%, 24% { background: #fff; border-color: #c7cbe6; border-style: dashed; } 26.5% { background: #ffd9d1; border-color: #312e81; border-style: solid; } 31.5%, 92% { background: #fff7f5; border-color: #312e81; border-style: solid; } 98%, 100% { background: #fff; border-color: #c7cbe6; border-style: dashed; } }
    @keyframes hawT2 { 0%, 24% { opacity: 0; transform: translateY(4px); } 26.5%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
    @keyframes hawL2 { 0%, 23% { color: #312e81; background: transparent; } 24%, 27.5% { color: #1e1b4b; background: #fde2dd; } 30.5%, 92% { color: #a5a8c8; background: transparent; } 97%, 100% { color: #312e81; } }
    @keyframes hawD2 { 0%, 24% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } 26.5%, 92% { background: #f2705e; box-shadow: 0 0 0 2px #fde2dd; } 97%, 100% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } }
    .hub-anim.ha-print-labels-from-word .hw-c3 { animation-name: hawC3; } .hub-anim.ha-print-labels-from-word .hw-c3 > * { animation-name: hawT3; } .hub-anim.ha-print-labels-from-word .hw-l3 { animation-name: hawL3; } .hub-anim.ha-print-labels-from-word .hw-l3::before { animation-name: hawD3; }
    @keyframes hawC3 { 0%, 29% { background: #fff; border-color: #c7cbe6; border-style: dashed; } 31.5% { background: #ffd9d1; border-color: #312e81; border-style: solid; } 36.5%, 92% { background: #fff7f5; border-color: #312e81; border-style: solid; } 98%, 100% { background: #fff; border-color: #c7cbe6; border-style: dashed; } }
    @keyframes hawT3 { 0%, 29% { opacity: 0; transform: translateY(4px); } 31.5%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
    @keyframes hawL3 { 0%, 28% { color: #312e81; background: transparent; } 29%, 32.5% { color: #1e1b4b; background: #fde2dd; } 35.5%, 92% { color: #a5a8c8; background: transparent; } 97%, 100% { color: #312e81; } }
    @keyframes hawD3 { 0%, 29% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } 31.5%, 92% { background: #f2705e; box-shadow: 0 0 0 2px #fde2dd; } 97%, 100% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } }
    .hub-anim.ha-print-labels-from-word .hw-c4 { animation-name: hawC4; } .hub-anim.ha-print-labels-from-word .hw-c4 > * { animation-name: hawT4; } .hub-anim.ha-print-labels-from-word .hw-l4 { animation-name: hawL4; } .hub-anim.ha-print-labels-from-word .hw-l4::before { animation-name: hawD4; }
    @keyframes hawC4 { 0%, 34% { background: #fff; border-color: #c7cbe6; border-style: dashed; } 36.5% { background: #ffd9d1; border-color: #312e81; border-style: solid; } 41.5%, 92% { background: #fff7f5; border-color: #312e81; border-style: solid; } 98%, 100% { background: #fff; border-color: #c7cbe6; border-style: dashed; } }
    @keyframes hawT4 { 0%, 34% { opacity: 0; transform: translateY(4px); } 36.5%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
    @keyframes hawL4 { 0%, 33% { color: #312e81; background: transparent; } 34%, 37.5% { color: #1e1b4b; background: #fde2dd; } 40.5%, 92% { color: #a5a8c8; background: transparent; } 97%, 100% { color: #312e81; } }
    @keyframes hawD4 { 0%, 34% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } 36.5%, 92% { background: #f2705e; box-shadow: 0 0 0 2px #fde2dd; } 97%, 100% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } }
    .hub-anim.ha-print-labels-from-word .hw-c5 { animation-name: hawC5; } .hub-anim.ha-print-labels-from-word .hw-c5 > * { animation-name: hawT5; } .hub-anim.ha-print-labels-from-word .hw-l5 { animation-name: hawL5; } .hub-anim.ha-print-labels-from-word .hw-l5::before { animation-name: hawD5; }
    @keyframes hawC5 { 0%, 39% { background: #fff; border-color: #c7cbe6; border-style: dashed; } 41.5% { background: #ffd9d1; border-color: #312e81; border-style: solid; } 46.5%, 92% { background: #fff7f5; border-color: #312e81; border-style: solid; } 98%, 100% { background: #fff; border-color: #c7cbe6; border-style: dashed; } }
    @keyframes hawT5 { 0%, 39% { opacity: 0; transform: translateY(4px); } 41.5%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
    @keyframes hawL5 { 0%, 38% { color: #312e81; background: transparent; } 39%, 42.5% { color: #1e1b4b; background: #fde2dd; } 45.5%, 92% { color: #a5a8c8; background: transparent; } 97%, 100% { color: #312e81; } }
    @keyframes hawD5 { 0%, 39% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } 41.5%, 92% { background: #f2705e; box-shadow: 0 0 0 2px #fde2dd; } 97%, 100% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } }
    .hub-anim.ha-print-labels-from-word .hw-c6 { animation-name: hawC6; } .hub-anim.ha-print-labels-from-word .hw-c6 > * { animation-name: hawT6; } .hub-anim.ha-print-labels-from-word .hw-l6 { animation-name: hawL6; } .hub-anim.ha-print-labels-from-word .hw-l6::before { animation-name: hawD6; }
    @keyframes hawC6 { 0%, 44% { background: #fff; border-color: #c7cbe6; border-style: dashed; } 46.5% { background: #ffd9d1; border-color: #312e81; border-style: solid; } 51.5%, 92% { background: #fff7f5; border-color: #312e81; border-style: solid; } 98%, 100% { background: #fff; border-color: #c7cbe6; border-style: dashed; } }
    @keyframes hawT6 { 0%, 44% { opacity: 0; transform: translateY(4px); } 46.5%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
    @keyframes hawL6 { 0%, 43% { color: #312e81; background: transparent; } 44%, 47.5% { color: #1e1b4b; background: #fde2dd; } 50.5%, 92% { color: #a5a8c8; background: transparent; } 97%, 100% { color: #312e81; } }
    @keyframes hawD6 { 0%, 44% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } 46.5%, 92% { background: #f2705e; box-shadow: 0 0 0 2px #fde2dd; } 97%, 100% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } }
    .hub-anim.ha-print-labels-from-word .hw-c7 { animation-name: hawC7; } .hub-anim.ha-print-labels-from-word .hw-c7 > * { animation-name: hawT7; } .hub-anim.ha-print-labels-from-word .hw-l7 { animation-name: hawL7; } .hub-anim.ha-print-labels-from-word .hw-l7::before { animation-name: hawD7; }
    @keyframes hawC7 { 0%, 49% { background: #fff; border-color: #c7cbe6; border-style: dashed; } 51.5% { background: #ffd9d1; border-color: #312e81; border-style: solid; } 56.5%, 92% { background: #fff7f5; border-color: #312e81; border-style: solid; } 98%, 100% { background: #fff; border-color: #c7cbe6; border-style: dashed; } }
    @keyframes hawT7 { 0%, 49% { opacity: 0; transform: translateY(4px); } 51.5%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
    @keyframes hawL7 { 0%, 48% { color: #312e81; background: transparent; } 49%, 52.5% { color: #1e1b4b; background: #fde2dd; } 55.5%, 92% { color: #a5a8c8; background: transparent; } 97%, 100% { color: #312e81; } }
    @keyframes hawD7 { 0%, 49% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } 51.5%, 92% { background: #f2705e; box-shadow: 0 0 0 2px #fde2dd; } 97%, 100% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } }
    .hub-anim.ha-print-labels-from-word .hw-c8 { animation-name: hawC8; } .hub-anim.ha-print-labels-from-word .hw-c8 > * { animation-name: hawT8; } .hub-anim.ha-print-labels-from-word .hw-l8 { animation-name: hawL8; } .hub-anim.ha-print-labels-from-word .hw-l8::before { animation-name: hawD8; }
    @keyframes hawC8 { 0%, 54% { background: #fff; border-color: #c7cbe6; border-style: dashed; } 56.5% { background: #ffd9d1; border-color: #312e81; border-style: solid; } 61.5%, 92% { background: #fff7f5; border-color: #312e81; border-style: solid; } 98%, 100% { background: #fff; border-color: #c7cbe6; border-style: dashed; } }
    @keyframes hawT8 { 0%, 54% { opacity: 0; transform: translateY(4px); } 56.5%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
    @keyframes hawL8 { 0%, 53% { color: #312e81; background: transparent; } 54%, 57.5% { color: #1e1b4b; background: #fde2dd; } 60.5%, 92% { color: #a5a8c8; background: transparent; } 97%, 100% { color: #312e81; } }
    @keyframes hawD8 { 0%, 54% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } 56.5%, 92% { background: #f2705e; box-shadow: 0 0 0 2px #fde2dd; } 97%, 100% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } }
    .hub-anim.ha-print-labels-from-word .hw-c9 { animation-name: hawC9; } .hub-anim.ha-print-labels-from-word .hw-c9 > * { animation-name: hawT9; } .hub-anim.ha-print-labels-from-word .hw-l9 { animation-name: hawL9; } .hub-anim.ha-print-labels-from-word .hw-l9::before { animation-name: hawD9; }
    @keyframes hawC9 { 0%, 59% { background: #fff; border-color: #c7cbe6; border-style: dashed; } 61.5% { background: #ffd9d1; border-color: #312e81; border-style: solid; } 66.5%, 92% { background: #fff7f5; border-color: #312e81; border-style: solid; } 98%, 100% { background: #fff; border-color: #c7cbe6; border-style: dashed; } }
    @keyframes hawT9 { 0%, 59% { opacity: 0; transform: translateY(4px); } 61.5%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
    @keyframes hawL9 { 0%, 58% { color: #312e81; background: transparent; } 59%, 62.5% { color: #1e1b4b; background: #fde2dd; } 65.5%, 92% { color: #a5a8c8; background: transparent; } 97%, 100% { color: #312e81; } }
    @keyframes hawD9 { 0%, 59% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } 61.5%, 92% { background: #f2705e; box-shadow: 0 0 0 2px #fde2dd; } 97%, 100% { background: #c7cbe6; box-shadow: 0 0 0 2px #eef0fa; } }
}