/* Next Factory Cimatron interactive affordance hotfix — 2026-09-29 */
#serenite .cue-mobile{display:none}
#serenite .board-head{margin-bottom:15px}
#serenite .board-head .eyebrow{color:#f4f6f8}
#serenite .board-head p{display:block!important;margin-top:7px!important;color:#c0cad5!important;font-size:12px!important;line-height:1.5!important}
#serenite #start-tour{box-shadow:0 0 0 0 rgba(227,6,19,0);transition:transform .2s,box-shadow .2s,background .2s}
#serenite #start-tour:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(227,6,19,.22)}

#serenite .interaction-guide{
  display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:12px 14px;
  border:1px solid rgba(255,101,110,.5);border-radius:12px;
  background:linear-gradient(90deg,rgba(227,6,19,.16),rgba(23,31,41,.84) 38%,rgba(17,24,32,.92));
  color:#dce4ec;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)
}
#serenite .guide-icon{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#e30613;color:#fff;font-size:18px;font-weight:800;box-shadow:0 0 0 6px rgba(227,6,19,.1)}
#serenite .guide-copy{display:block;font-size:11px;line-height:1.5;color:#b9c5d1}
#serenite .guide-copy strong{color:#fff;font-size:12px;margin-right:3px}
#serenite .guide-badge{display:inline-block;margin-right:9px;padding:3px 7px;border-radius:999px;background:#e30613;color:#fff;font-size:8px;font-weight:900;letter-spacing:.12em;vertical-align:1px}

#serenite .tile{cursor:pointer;box-shadow:0 0 0 rgba(0,0,0,0);transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
#serenite .tile-bottom{align-items:flex-end}
#serenite .tile-open{display:inline-flex;align-items:center;gap:7px;margin-left:auto;flex:0 0 auto;color:#dce5ee}
#serenite .tile-cta{font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.86;transition:opacity .2s,color .2s,transform .2s}
#serenite .tile .arrow{transition:background .2s,border-color .2s,color .2s,transform .2s}

@media (hover:hover) and (pointer:fine){
  #serenite .tile:hover{border-color:#ff5b65;transform:translateY(-5px) scale(1.008);background:linear-gradient(140deg,#302631,#20252e);box-shadow:0 15px 34px rgba(0,0,0,.28),0 0 0 1px rgba(227,6,19,.13)}
  #serenite .tile:hover .tile-cta{color:#fff;opacity:1;transform:translateX(-2px)}
  #serenite .tile:hover .arrow{background:#e30613;color:#fff;border-color:#e30613;transform:translate(2px,-2px)}
}
#serenite .tile:focus-visible{border-color:#ff6670;box-shadow:0 0 0 3px rgba(227,6,19,.22),0 15px 30px rgba(0,0,0,.2)}

/* One-time visual cue when the block becomes visible. */
@keyframes nfRepereGuidePulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}35%{box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 0 4px rgba(227,6,19,.12)}}
@keyframes nfRepereTileCue{0%,100%{border-color:#333c48;transform:none;box-shadow:0 0 0 rgba(227,6,19,0)}35%,60%{border-color:#ff5e67;transform:translateY(-3px);box-shadow:0 10px 28px rgba(227,6,19,.15)}}
#serenite .board.cue-active .interaction-guide{animation:nfRepereGuidePulse 1.25s ease 1}
#serenite .board.cue-active .tile:nth-child(1){animation:nfRepereTileCue 1.3s ease .18s 1}
#serenite .board.cue-active .tile:nth-child(2){animation:nfRepereTileCue 1.3s ease .42s 1}

@media (max-width:760px){
  #serenite .cue-desktop{display:none}
  #serenite .cue-mobile{display:inline}
  #serenite .board-head{gap:12px;margin-bottom:13px}
  #serenite .board-head p{font-size:12px!important;max-width:310px}
  #serenite #start-tour{width:100%;min-height:47px;text-align:center;justify-content:center}
  #serenite .interaction-guide{margin-bottom:14px;padding:12px;gap:11px;background:linear-gradient(135deg,rgba(227,6,19,.2),rgba(18,26,35,.96) 52%)}
  #serenite .guide-icon{flex-basis:30px;width:30px;height:30px;font-size:16px}
  #serenite .guide-copy{font-size:11px}
  #serenite .guide-copy strong{display:block;font-size:12px;margin:2px 0}
  #serenite .guide-badge{font-size:8px;margin-bottom:2px}
  #serenite .tile{border-color:#424d5a}
  #serenite .tile-open{gap:8px}
  #serenite .tile-cta{font-size:10px;opacity:1;color:#fff}
  #serenite .tile .arrow{background:#e30613;border-color:#e30613;color:#fff}
  #serenite .board-foot{padding-top:15px!important}
  #serenite .board-foot-hint{font-size:10px;color:#b6c1cc}
}

@media (prefers-reduced-motion:reduce){
  #serenite .board.cue-active .interaction-guide,
  #serenite .board.cue-active .tile{animation:none!important}
}