/* ============================================================
   KaizenHub — animated honeycomb 7-P mark ("hex flower")
   Shared component. Mount with:
     <div class="hex-stage SIZECLASS"><div class="hex-field"
          data-hexw="125" data-hexh="108.25"
          data-stagew="380" data-stageh="340"></div></div>
   and include assets/js/hexflower.js.
   ============================================================ */
.hex-stage{margin:0 auto;overflow:visible;max-width:100%;min-width:0}
.hex-fit{position:relative;min-width:0}
.hex-field{position:relative;margin:0 auto;perspective:1200px;transform-origin:center center}
.hex-field.spin{animation:settle 1.7s cubic-bezier(.22,.7,.27,1) both}
@keyframes settle{
  0%{transform:rotate(-760deg) scale(.4);opacity:0}
  50%{opacity:1}
  74%{transform:rotate(15deg) scale(1.05)}
  88%{transform:rotate(-6deg) scale(.99)}
  100%{transform:rotate(0deg) scale(1);opacity:1}
}
.hex-connector{position:absolute;background:var(--blue);clip-path:polygon(50% 0%,0% 100%,100% 100%);pointer-events:none;z-index:1;filter:drop-shadow(0 2px 3px rgba(29,43,80,.18))}
.hex-pos{position:absolute;transform:translate(-50%,-50%);z-index:2}
.hex-card{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d;cursor:pointer}
.hex-card.flipped{transform:rotateY(180deg)}
.hex-card.pulse{animation:pulse .55s ease}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.hex-card.flipped.pulse{animation:none}
.hex-face{position:absolute;inset:0;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);backface-visibility:hidden;display:flex;align-items:center;justify-content:center}
.hex-face .fill{position:absolute;inset:2.5px;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px}
.hex-face.front{background:var(--navy);box-shadow:0 6px 16px rgba(29,43,80,.16)}
.hex-face.front .fill{background:#fff;color:var(--navy)}
.hex-face.back{background:var(--blue);transform:rotateY(180deg)}
.hex-face.back .fill{background:var(--navy);color:#fff}
.hex-word{font-weight:700;letter-spacing:.01em}
.hex-word .big{font-weight:900;color:var(--blue-deep,#1B8AC0)}
.hex-face.center .fill{background:var(--blue);color:#fff}
.hex-face.center .hex-word .big{color:#fff}
.hex-icon{color:#fff}
.hex-icon.dollar{font-weight:900;line-height:1}
.hex-tag{color:#BFDEF0;line-height:1.3}

/* hero instance sizing */
.hero-hex-stage{width:380px;max-width:100%}
.hero-hex-stage .hex-field{width:380px;height:340px}
.hero-hex-stage .hex-word{font-size:.72rem}
.hero-hex-stage .hex-word .big{font-size:1.25rem}
.hero-hex-stage .hex-icon{width:22px;height:22px;margin-bottom:1px}
.hero-hex-stage .hex-icon.dollar{font-size:1.25rem}
.hero-hex-stage .hex-tag{font-size:.56rem;max-width:88px}

/* framework instance sizing */
.fw-hex-stage{width:460px}
.fw-hex-stage .hex-field{width:460px;height:430px}
.fw-hex-stage .hex-word{font-size:.98rem}
.fw-hex-stage .hex-word .big{font-size:1.7rem}
.fw-hex-stage .hex-icon{width:30px;height:30px;margin-bottom:2px}
.fw-hex-stage .hex-icon.dollar{font-size:1.7rem}
.fw-hex-stage .hex-tag{font-size:.68rem;max-width:110px}

/* compact instance — inner-page headers */
.mini-hex-stage{width:230px;max-width:100%}
.mini-hex-stage .hex-field{width:230px;height:206px}
.mini-hex-stage .hex-word{font-size:.46rem}
.mini-hex-stage .hex-word .big{font-size:.8rem}
.mini-hex-stage .hex-icon{width:15px;height:15px}
.mini-hex-stage .hex-icon.dollar{font-size:.85rem}
.mini-hex-stage .hex-tag{font-size:.38rem;max-width:56px}

@media (prefers-reduced-motion:reduce){
  .hex-field.spin{animation:none}
  .hex-card{transition:none}
}