/* Zack hero (6 Nov 2026). Front page only. CSS animation for the steam (runs off the main thread);
   transitions for the speech bubble, eyebrow and shades so they retarget cleanly. transform and opacity only. */
.zk-idcard .zh-svg { display: block; width: 100%; height: auto; background: var(--paper); border: 1px solid var(--ink); overflow: hidden; }
.zh-steam, .zh-brow, .zh-shades { transform-box: view-box; }
.zh-steam { transform-origin: 335px 330px; animation: zh-steam 3.2s ease-in-out infinite; }
@keyframes zh-steam {
	0%, 100% { transform: translateY(0); opacity: .7; }
	50% { transform: translateY(-7px); opacity: .25; }
}
.zh-brow { transform-origin: 171px 164px; transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.zk-hero__zack.is-talking .zh-brow { transform: translateY(-7px) rotate(-4deg); }
.zh-shades { transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1); }

.zh-bubble { position: absolute; top: 13%; left: 5%; max-width: 46%; margin: 0; padding: 9px 12px; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); font: 400 .82rem/1.3 var(--f-type); letter-spacing: .02em; z-index: 3; pointer-events: none; opacity: 0; transform: translateY(4px) scale(.95); transform-origin: 80% 100%; transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.zh-bubble::after { content: ""; position: absolute; right: 18%; bottom: -12px; width: 18px; height: 18px; background: #fff; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(35deg) skewX(10deg); }
.zh-bubble.is-on { opacity: 1; transform: translateY(0) scale(1); }

@media (hover: hover) and (pointer: fine) {
	.zk-hero__zack:hover .zh-shades { transform: translateY(15px); }
}
@media (prefers-reduced-motion: reduce) {
	.zh-steam { animation: none; }
	.zh-brow, .zh-shades { transition: none; }
	.zh-bubble { transition: opacity 200ms ease; transform: none; }
}

/* Keep the hero buttons above the fold on laptop/desktop screens (1.8.15). Big screens keep the full-size headline; mobile unchanged. */
@media (min-width: 901px) {
	.zk-hero { padding-top: clamp(14px, 2.5vh, 40px); padding-bottom: clamp(28px, 5vh, 56px); }
	.zk-hero__copy { align-self: start; }
	.zk-hero .zk-label--boxed { margin-bottom: 6px !important; }
	.zk-hero__title { font-size: clamp(3.4rem, min(11vw, 24vh - 6rem), 9.5rem) !important; margin: 8px 0 10px !important; }
	.zk-hero__sub { margin-bottom: 8px !important; }
	.zk-hero__text { font-size: clamp(1.2rem, min(2.6vw, 3.4vh), 1.7rem) !important; margin-bottom: 14px !important; }
}