/* Only the home page opts in. The solved puzzle is visible without JavaScript. */
.hero-mobile-copy { display: none; }
.hero--animated .head-image {
    position: relative;
    isolation: isolate;
    background: none;
    padding: 24px 24px 12px;
    text-align: center;
}
.puzzle-heading { margin: 0 0 12px; color: #355473; font-size: 20px; font-weight: 700; line-height: 1.3; }
.puzzle-board { display: block; width: 100%; max-width: 380px; margin: 0 auto; overflow: visible; }
.puzzle-field { fill: #fafdff; stroke: #bdd0e5; stroke-width: 1.5; }
.puzzle-blue { --pair-color: #205bdb; --pair-tint: #edf3ff; }
.puzzle-purple { --pair-color: #8351ce; --pair-tint: #f4efff; }
.puzzle-cyan { --pair-color: #168797; --pair-tint: #ebf9fa; }
.puzzle-amber { --pair-color: #b87a21; --pair-tint: #fff7e8; }
.puzzle-green { --pair-color: #38865c; --pair-tint: #eef8f0; }
.puzzle-rose { --pair-color: #b95179; --pair-tint: #fff0f5; }
.puzzle-wire { stroke: var(--pair-color); stroke-width: 8; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .8; }
.puzzle-node-ring { fill: var(--pair-tint); stroke: var(--pair-color); stroke-width: 1.3; }
.puzzle-icon { fill: none; stroke: var(--pair-color); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.puzzle-error { opacity: 0; }
.puzzle-error circle { fill: #fff3ef; stroke: #c35949; stroke-width: 1.3; }
.puzzle-error path { fill: none; stroke: #c35949; stroke-width: 1.6; stroke-linecap: round; }
.puzzle-caption { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 34px; color: #405976; font-size: 16px; }
.puzzle-status { font-weight: 700; }
.puzzle-status.is-solved { color: #38865c; }
.puzzle-attempt { color: #7890aa; font-size: 10px; font-variant-numeric: tabular-nums; }
.hero--animated .hero-actions .btn-primary { transition: transform 200ms ease, box-shadow 200ms ease; }
@media (prefers-reduced-motion: no-preference) {
    .hero--animated .eyebrow, .hero--animated #hero-title, .hero--animated #hero-subtitle, .hero--animated .hero-actions, .hero--animated .hero-proof {
        animation: hero-content-in 550ms cubic-bezier(.2,.7,.2,1) backwards;
    }
    .hero--animated #hero-title { animation-delay: 60ms; }
    .hero--animated #hero-subtitle { animation-delay: 140ms; }
    .hero--animated .hero-actions { animation-delay: 220ms; }
    .hero--animated .hero-proof { animation-delay: 300ms; }
    .hero--animated .head-image { animation: hero-content-in 850ms 100ms cubic-bezier(.2,.7,.2,1) backwards; }
    .hero--animated .hero-actions .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 24px #205bdb26; }
    .hero--animated .hero-actions .btn-primary:active { transform: translateY(0); }
}
@keyframes hero-content-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 992px) {
    .hero--animated .head-text { display: contents; }
    .hero-desktop-copy { display: none; }
    .hero-mobile-copy { display: inline; }
    .hero--animated .eyebrow { order: 0; margin: 0 0 10px; font-size: 11px; }
    .hero--animated #hero-title { order: 1; margin: 0; font-size: clamp(26px,6.5vw,34px); line-height: 1.12; color: #10213b; background: none; -webkit-text-fill-color: currentColor; }
    .hero--animated #hero-subtitle { order: 6; margin: 28px 0 18px; font-size: 15px; }
    .hero--animated .hero-actions { display: contents; }
    .hero--animated #hero-cta { order: 3; width: 100%; max-width: 380px; padding: 15px 12px; font-size: 14px; }
    .hero--animated .hero-case-link { order: 7; font-size: 13px; }
    .hero--animated .hero-proof { order: 8; width: 100%; }
    .hero--animated .head-image {
        order: 2; display: block; flex: none; width: min(100%,360px); max-width: 100%; margin: 12px auto 10px; padding: 0;
    }
    .hero--animated .head-content { padding: 12px 6% 24px; }
    .puzzle-heading { font-size: 16px; margin-bottom: 8px; }
    .puzzle-board { width: auto; height: clamp(205px,30svh,245px); max-width: 100%; }
    .puzzle-caption { font-size: 13px; min-height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .hero--animated .hero-actions .btn-primary { transition: none; } }