/* /qr-code-labels: How it works scene (a QR label on a box, a phone scans it and opens the page). Sizes in em so the phone layout only changes font-size. */
.hub-anim.ha-qr-code-labels .ha-stage { min-height: 0; border: 1px solid #134e4a; background: radial-gradient(circle, rgba(94, 234, 212, .16) 1px, transparent 1.6px) 0 0 / 18px 18px, linear-gradient(160deg, #042f2e 0%, #0f3d4c 100%); }
.hub-anim.ha-qr-code-labels .sc { position: relative; font-size: 16px; width: 32em; max-width: 100%; height: 17em; margin: 0 auto; }
.hub-anim.ha-qr-code-labels .qc-box { position: absolute; left: 3em; top: 2.2em; width: 13.5em; height: 12.5em; background: linear-gradient(160deg, #d6b98c, #c19a64); border: 2px solid #1f2937; border-radius: .5em; box-shadow: .35em .45em 0 rgba(0, 0, 0, .35); }
.hub-anim.ha-qr-code-labels .qc-box::before { content: ""; position: absolute; left: 0; right: 0; top: 2.2em; height: 1.1em; background: rgba(255, 255, 255, .28); }
.hub-anim.ha-qr-code-labels .qc-lab { position: absolute; left: 2.6em; top: 2.1em; width: 8.2em; padding: .55em .6em .5em; background: #fff; border: 1.5px solid #1f2937; border-radius: .45em; text-align: center; box-sizing: border-box; }
.hub-anim.ha-qr-code-labels .qc-lab b { display: block; margin-bottom: .3em; font: 800 .62em/1 Manrope, Inter, sans-serif; letter-spacing: .12em; color: #0f172a; }
.hub-anim.ha-qr-code-labels .qc-lab svg { display: block; width: 5.4em; height: 5.4em; margin: 0 auto; fill: #0f172a; }
.hub-anim.ha-qr-code-labels .qc-lab small { display: block; margin-top: .35em; font: 600 .5em/1 Inter, system-ui, sans-serif; color: #334155; }
.hub-anim.ha-qr-code-labels .qc-phone { position: absolute; right: 2.4em; top: .6em; z-index: 2; width: 8.6em; height: 15.6em; padding: .45em; background: #0b0f14; border: 2px solid #5eead4; border-radius: 1.4em; box-sizing: border-box; box-shadow: 0 1.2em 2em -1em rgba(0, 0, 0, .7); }
.hub-anim.ha-qr-code-labels .qc-screen { position: relative; height: 100%; overflow: hidden; border-radius: 1em; background: #0f172a; }
.hub-anim.ha-qr-code-labels .qc-cam { position: absolute; inset: 0; background: linear-gradient(180deg, #334155, #1e293b); opacity: 0; }
.hub-anim.ha-qr-code-labels .qc-cam i { position: absolute; width: 1.2em; height: 1.2em; border: .22em solid #5eead4; }
.hub-anim.ha-qr-code-labels .qc-f1 { left: 1.1em; top: 4em; border-right: 0 !important; border-bottom: 0 !important; } .hub-anim.ha-qr-code-labels .qc-f2 { right: 1.1em; top: 4em; border-left: 0 !important; border-bottom: 0 !important; }
.hub-anim.ha-qr-code-labels .qc-f3 { left: 1.1em; top: 9.4em; border-right: 0 !important; border-top: 0 !important; } .hub-anim.ha-qr-code-labels .qc-f4 { right: 1.1em; top: 9.4em; border-left: 0 !important; border-top: 0 !important; }
.hub-anim.ha-qr-code-labels .qc-code { position: absolute; left: 1.55em; top: 4.45em; width: 5.4em; height: 5.4em; padding: .2em; background: #fff; border-radius: .2em; } .hub-anim.ha-qr-code-labels .qc-code svg { display: block; width: 100%; height: 100%; fill: #0f172a; }
.hub-anim.ha-qr-code-labels .qc-line { position: absolute; left: 1.3em; right: 1.3em; top: 4.3em; height: .18em; border-radius: .1em; background: #5eead4; box-shadow: 0 0 .7em #5eead4; }
.hub-anim.ha-qr-code-labels .qc-page { position: absolute; inset: 0; padding: .9em .8em; background: #f8fafc; }
.hub-anim.ha-qr-code-labels .qc-url { margin: 0 0 .9em; padding: .3em .4em; background: #e2e8f0; border-radius: .6em; font: 600 .5em/1 Inter, system-ui, sans-serif; color: #475569; text-align: center; }
.hub-anim.ha-qr-code-labels .qc-page b { display: block; margin-bottom: .6em; font: 800 .95em/1.1 Manrope, Inter, sans-serif; color: #0f3d4c; }
.hub-anim.ha-qr-code-labels .qc-page i { display: block; height: .38em; margin-bottom: .45em; border-radius: .2em; background: #cbd5e1; } .hub-anim.ha-qr-code-labels .qc-page i:nth-of-type(2) { width: 80%; } .hub-anim.ha-qr-code-labels .qc-page i:nth-of-type(3) { width: 60%; }
.hub-anim.ha-qr-code-labels .qc-page em { display: block; margin-top: .9em; padding: .5em; background: #ccfbf1; border-radius: .5em; font: 700 .55em/1.2 Inter, system-ui, sans-serif; font-style: normal; color: #115e59; }
@media (max-width: 640px) { .hub-anim.ha-qr-code-labels .sc { font-size: 7.4px; } .hub-anim.ha-qr-code-labels .ha-stage { padding-bottom: 3.4rem; } }
/* Reduced motion: the finished scene, phone beside the label showing the page. */
@media (prefers-reduced-motion: no-preference) {
 .hub-anim.ha-qr-code-labels .qc-phone { animation: qc-phone 10s ease-in-out infinite both; }
 .hub-anim.ha-qr-code-labels .qc-cam { animation: qc-cam 10s ease infinite both; }
 .hub-anim.ha-qr-code-labels .qc-code { position: absolute; left: 1.55em; top: 4.45em; width: 5.4em; height: 5.4em; padding: .2em; background: #fff; border-radius: .2em; } .hub-anim.ha-qr-code-labels .qc-code svg { display: block; width: 100%; height: 100%; fill: #0f172a; }
.hub-anim.ha-qr-code-labels .qc-line { animation: qc-line 10s linear infinite both; }
 .hub-anim.ha-qr-code-labels .qc-page { animation: qc-page 10s ease infinite both; }
 @keyframes qc-phone { 0%, 8% { transform: none; } 22%, 50% { transform: translate(-9.6em, .4em) rotate(-4deg); } 62%, 100% { transform: none; } }
 @keyframes qc-cam { 0%, 18% { opacity: 0; } 22%, 48% { opacity: 1; } 52%, 100% { opacity: 0; } }
 @keyframes qc-line { 0%, 24% { transform: none; } 34% { transform: translateY(6em); } 44% { transform: none; } 48%, 100% { transform: translateY(3em); } }
 @keyframes qc-page { 0%, 18% { opacity: 0; transform: translateY(1em); } 22%, 48% { opacity: 0; } 54%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
}